您的位置：首页 > 网页 HTML CSS之FORM_html/css_WEB

站内搜索

HTML CSS之FORM_html/css_WEB

form 表单常用于收集不同类用户的输入，允许用户收集：文本域（text）、下拉列表(select)、单选框(radio)、复选框(checkbox) 以及动按纽（Action）

表单标签

标签	描述
	定义供用户输入的表单
	定义输入域
</td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义文本域 (一个多行的输入控件)</td> </tr> <tr style="margin:0px;padding:0px;border:0px;"> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);"><label></td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义一个控制的标签</td> </tr> <tr style="margin:0px;padding:0px;border:0px;"> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);"><fieldset></td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义域</td> </tr> <tr style="margin:0px;padding:0px;border:0px;"> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);"><legend></td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义域的标题</td> </tr> <tr style="margin:0px;padding:0px;border:0px;"> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);"><select></td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义一个选择列表</td> </tr> <tr style="margin:0px;padding:0px;border:0px;"> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);"><optgroup></td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义选项组</td> </tr> <tr style="margin:0px;padding:0px;border:0px;"> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);"><option></td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义下拉列表中的选项</td> </tr> <tr style="margin:0px;padding:0px;border:0px;"> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);"><button></td> <td style="margin:0px;padding:6px 15px 6px 6px;vertical-align:text-top;background-color:rgb(239,239,239);">定义一个按钮</td> </tr> </table> <p><br /><br /></p> <p> 大多数表单标签都是input标签，输入类型是（type）定义的。</p> <p> 例：<form></p> <p> <input type="text" name="first_text"><br /></p> <p> <input type='text' name="address" value="广东"> 当需要默认值时用 value属性<br /></p> <p> <input type="radio" name="姓别" value="boy"></p> <p> <input type="radio" name="姓别" value="boy" checked="selected" / >(默认选中) 单选</p> <p> <input type="checkbox" name="老虎"><br /></p> <p> <input type="checkbox" name="地名",value="江西" checked="selected"> （默认选中）多选<br /></p> <p><br /></p> <p> 下拉列表使用到的元素为: select 属性为:option</p> <p> 例：</p> <p> <select></p> <p> <option value="dongfong">东风</option></p> <p> <option value="qq" selected="select" >寄瑞</option> selected为默认选择属性 <option value="jili">吉利</option></p> <p> </select> </p> <p> </form></p> <p></p> <p>本例演示如何在数据周围绘制一个带标题的框。</p> <p></p> <p><form></p> <p><fieldset></p> <p> <legend>健康信息</legend></p> <p> 身高：<input type="text" /></p> <p> 三围：<input type="text" /> </p> <p></fieldset></p> <p></form></p> <p>Button 按钮的三个属性</p> <table> <tr> <td>submit</td> <td>该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。</td> </tr> <tr> <td>button</td> <td>该按钮是可点击的按钮（Internet Explorer 的默认值）。</td> </tr> <tr> <td>reset</td> <td>该按钮是重置按钮（清除表单数据）。</td> </tr> </table> <pre class="scode"><form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /> Last name: <input type="text" name="lname" /> <button type="submit" value="Submit">Submit</button> <button type="reset" value="Reset">Reset</button></form></pre> </td></tr></table></div> <div class="textbot"> <ul> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]\|\|body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <li>上一篇：<a href='/wangyezhizuo/2019-04-04/19457.html'>固定高度和百分比高度能否有限结合，完美布局？_html/css_WEB</a></li> <li>下一篇：<a href='/wangyezhizuo/2019-04-04/19459.html'>网站被恶意插入广告代码缺检查不出来代码在何处_html/css_WEB</a></li> </ul></div> </div> </td><td valign="top"> <div id="sidebar"> <div class="sider2" id="column"> <div class="title">栏目导航</div> <ul class="li_float_l"><li><a href="/php/" title="php">php</a></li><li><a href="/asp/" title="asp">asp</a></li><li><a href="/jsp/" title="jsp">jsp</a></li><li><a href="/JavaScript/" title="JavaScript">JavaScript</a></li><li><a href="/XML/" title="XML">XML</a></li><li><a href="/C/" title="C">C</a></li><li><a href="/dos/" title="系统">系统</a></li><li><a href="/wangyezhizuo/" title="网页">网页</a></li><li><a href="/MySQL/" title="MySQL">MySQL</a></li><li><a href="/ACCESS/" title="ACCESS">ACCESS</a></li><li><a href="/shujujiegou/" title="数据结构">数据结构</a></li><li><a href="/vc/" title="VC">VC</a></li><li><a href="/Delphi/" title="Delphi">Delphi</a></li><li><a href="/e/action/ListInfo/?classid=22" title="微信">微信</a></li><li><a href="/e/action/ListInfo/?classid=24" title="PS">PS</a></li><li><a href="/lanqiu/" title="篮球">篮球</a></li><li><a href="/fuli/" title="福利">福利</a></li></ul> <div class="clear"></div> </div> <div class="sider2"> <div class="title">相关文章</div> 无相关信息 </div> <div class="sider2"> <div class="title">推荐文章</div> <ul></ul> <div class="more"><a href="/rec.html">更多推荐 >></a></div> </div> <div class="sider2"> <div class="title">栏目更新</div> <script src='/d/js/class/class8_newnews.js'></script> <div class="more"><a href="/new.html">更多更新 >></a></div> </div> <div class="pad-all ad-sider"><script type="text/javascript" src="/d/js/acmsd/gg2.js"></script></div> <div class="pad-all"> <div class="title2">您的展示窗口</div> <div class="ad-siderGG"> </div> </div> </div> </td></tr></table> <div id="footer"> <div id="botNav"><a href="/" >网站首页</a> \| <a href="/php/" title="php">php</a> \| <a href="/asp/" title="asp">asp</a> \| <a href="/jsp/" title="jsp">jsp</a> \| <a href="/JavaScript/" title="JavaScript">JavaScript</a> \| <a href="/XML/" title="XML">XML</a> \| <a href="/C/" title="C">C</a> \| <a href="/dos/" title="系统">系统</a> \| <a href="/wangyezhizuo/" title="网页">网页</a> \| <a href="/MySQL/" title="MySQL">MySQL</a> \| <a href="/ACCESS/" title="ACCESS">ACCESS</a> \| <a href="/shujujiegou/" title="数据结构">数据结构</a> \| <a href="/vc/" title="VC">VC</a> \| <a href="/Delphi/" title="Delphi">Delphi</a> \| <a href="/e/action/ListInfo/?classid=22" title="微信">微信</a> \| <a href="/e/action/ListInfo/?classid=24" title="PS">PS</a> \| <a href="/lanqiu/" title="篮球">篮球</a> \| <a href="/fuli/" title="福利">福利</a> \| <a href="#">返回顶部</a></div> <div id="copyright"> <ul> <li>版权所有 2017-2022 电脑技术最佳分辨率 1024×768 Powered by inter.red</li> <li>Copyright © <a href="http://ck.waydw.com">ck.waydw.com</a>, All rights reserved. <noscript></noscript></li> </ul> </div> </div> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> <script src="/e/public/onclick/?enews=donews&classid=8&id=19458"></script></body> </html>