HTML------关于表单Form-Tina_xy

掌握表单(Form)有以下几个要点：

重要form属性

form常用控件

form提交方式

§　　重要form属性

action {URL}：规定表单提交时向何处发送数据。

enctype ：规定在发送表单数据之前如何对表单数据进行编码。（值如下）

　　　　　　 application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）。

　　　 　　 multipart/form-data ：不对字符编码。 注：使用包含文件上传控件的表单时，必须使用该值。

method：指定表单以何种方法发送。

　　　　　　 get ：from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。（可以在地址栏看见表单的提交信息）

　　　　　　 post ：from表单里所填的值，附加在HTML Headers上。（不可以在地址栏看见表单的提交信息）

§　　form常用控件

标记：

　　标记为input元素定义标注，它的for 属性应当与相关元素的id属性相同。绑定后单击该文字，鼠标将聚焦到绑定的表单控件上。

　　　建议：每一个表单元素的文字描述都使用标记 ！（两标签之间的内容即为对绑定的表单控件的文字描述）

　　　注意：每个表单元素应当分配 name 属性 和 id 属性。( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)

　　　　　　name 属性：用来将数据提交到服务器；

　　　　　　id 属性：用来在客户端做相应的操作；如：标签的绑定、CSS 选择器的使用等。

文本输入框: 　　　　　　　　

1)、input type="text" 单行文本框

账号：

2)、textarea 多行文本框

评论：

说明: maxlength 规定文本区域的最大字符数；如果在 中输入字符时，换行也算一个字符。</p> <p>密码输入框：</p> <p>　　定义密码字段。（字符会被遮盖）</p> <div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"><label for= "Password">密码：</label> <input type="password" name="password" id="password" value="密码"></script></pre></div> <p>单选框：</p> <p>设置单选按钮 以及获取选中的单选按钮的值</p> <div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"><form name="MyForm" action="URL" method="post"> 　　<p>性别： 　　　<input type="radio" name="sex" id="male" value="male"><label for="male">male</label> 　　　<input type="radio" name="sex" id="female" value="female"><label for="female">female</label> 　　</p> 　　<input type="button" value="获取选中项" onclick="getValue();" /> </form><p>//获取选中的单选值 </script></pre></div> <p>注意：</p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/wenzhong.js"></script> <p>1）、在客户端，Javascript 对表单及表单元素的操作，更常用其name 属性而不是id属性。因为，对于某些特定的表单元素(如：单选按钮等)，使用其name 属性更易于获得元素值，也更方便向服务器传送数据！</p> <p>2）、保证同一组单选按钮的name 属性值相同。</p> <p>复选框：</p> <p>复选框的“全选”、“全不选”、“反选”功能 以及 所选复选框值的获得功能</p> <div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"><form name="MyForm" action="URL" method="post"> 　　<input type="checkbox" name="hoboy" id="music"><label for="music">music</label> 　　<input type="checkbox" name="hoboy" id="swim"><label for="swim">swim</label> 　　<input type="checkbox" name="hoboy" id="dance"><label for="dance">dance</label> 　　<input type="button" value="全选" onclick="selectBoxs(1);" /> 　　<input type="button" value="全不选" onclick="selectBoxs(0);" /> 　　<input type="button" value="反选" onclick="selectBoxs(-1);" /> 　　<input type="submit" value="提交" onclick="submit();" /> </form> </script></pre></div> <p>注意：保证同一组复选框按钮的name 属性值相同。</p> <p>下拉框：</p> <p>下拉框的重要属性：</p> <p>multiple 属性:用于设置下拉表框的类型（多选还是单选）</p> <p>type 属性：JS根据type 属性的值获得下拉列表框select 控件的类型。</p> <p>type 属性的值为：select-multiple（多选） 或 select-one（单选）</p> <p>下拉列表框默认只能选中一项，若要设置为可以多选，则设置<select multiple = "multiple"> 即可。</p> <p>size属性：定义可见选项的数目。size="3",即下拉框内可以显示三个可选选项。</p> <div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"><form name="MyForm" action="URL" method="post"> 　　<p>简单的选择列表</p> 　　<select id="myselect" name="myselect" multiple="multiple" size="3"> <option value="Apples">Apples</option> <option value="Bananas">Bananas</option> <option value="Cherries">Cherries</option> <option value="oranges">oranges</option> </select></br> 　　<input type="button" onclick="getSelectValue('myselect')" value="查看选项" /> </form><p></script></pre></div> <p>提示：</p> <p>在不同操作系统中，选择多个选项的差异：</p> <li>对于 windows：按住 Ctrl 按钮来选择多个选项</li> <li>对于 Mac：按住 command 按钮来选择多个选项</li> <p>由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。</p> <h2>§　　form提交方式</h2> <p>表单的提交方式由method属性的取值决定，所以form提交方式有以下两种：</p> <p> get 方式：</p> <p>表单数据将会追加action指定的URL后面，做为URL链接而传递（以查询字符串的形式提交到服务端）。</p> <p>变量提交的样式为：html元素的name属性=提交的值。多个变量，在URL链接后面以 & 符号隔开。</p> <p> post方式：</p> <p>表单数据将附加在请求体（HTML Headers）上被发送出去，并不附加在URL链接后面。</p> <p>建议：表单通常还是以post方式提交比较好，这样可以不破坏URL，况且URL还有长度限制。</p> <p>get 与 post 的区别：</p> <p>1）、get是从服务器上获取数据；post是向服务器传送数据</p> <p>2）、数据的查询：比如浏览论坛或博客时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息； post 因为隐藏掉了这些信息，不方便进行查询。</p> <p>3）、数据安全性：对一项记录，进行更改、添加操作时，get 方式附加在URL上，会泄露数据；post 方式，能隐藏数据，保证数据的安全性。</p> <p>4）、数据传输量：get 虽然方便查询，但由于是附加在URL上，使得其传送的数据量较小，不能大于2KB；post传送的数据量较大，一般被默认为不受限制。</p> <h2>资源链接</h2> <p>推荐 ：更多代码详解，请转到代码仓库：https://github.com/Tina-xy/HTML</p> <p>推荐 ： Fish Li 博主的 ---- 细说Form(表单) </p> <p>http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html</p><p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div> <div class="downbox clearfix"> <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div> <div class="txt"> <h4>HTML------关于表单Form-Tina_xy</h4> <div class="co">HTML------关于表单Form-Tina_xy:Form(表单)主要用于采集和提交用户输入的信息，是页面与WEB服务器交互过程中 最重要的信息来源。 掌握表单(Form)有以下几个要点： 重要form属性 form常用控件 form提交方式 § 重要form属性 action {URL}：规定表单提交时向何处发送数据。 enct</div> <div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div> </div> <div class="btn"> <a href="javascript:;" class="html2word" data-model="article" data-id="addbge" title="文档下载"> <b>点击下载本文</b> <span>文档为doc格式</span> </a> </div> </div> <script>keji_detail_ga('article_content_bottom');</script> <div class="tvideo_tag"> 标签： <a href="/tlist-48097/">xy</a> <a href="/tlist-173669/">表单</a> <a href="/tlist-246007/">html</a> </div> <div class="tvideo_box tvideo_box_tab"> <div class="hd"> <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul> </div> <div class="bd"> <ul class="ult_jpic clearfix"> <script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script> </ul> </div> </div> </div> <!--中间文章 end--> <!--右侧专题 star--> <div class="ult_zt"> <script>keji_detail_ga('article_right_top');</script> <div class="ult_ztbox"> <h4>最新推荐</h4> <ul class="tvideo_r_a clearfix"> <script>get_detail_right('wz_right_new',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_middle');</script> <div class="ult_ztbox"> <h4>猜你喜欢</h4> <ul class="telist_rb clearfix"> <script>get_detail_right('wz_right_love',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_new_bottom');</script> <div class="ult_ztbox"> <h4>热门推荐</h4> <ul class="tvideo_r_b clearfix"> <script>get_detail_right('wz_right_hot',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_bottom');</script> </div> <!--右侧专题 end--> <div style="display:none"><a href="https://www.51dongshi.net/wzztf/ad/addbge/">专题</a> </div> </div> </div> <script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script> <script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script> <style> #qrcode{padding: 15px;background: #fff;} </style> <div id="qrcode" style="display: none"></div> <script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfaddbge.html");</script> <iframe src="https://hits.51dongshi.net/?biao=ho_article&id=922640" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <script src="https://js.51dongshi.net/js/shHighlighter.js"></script> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script> <div style="display:none"><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <!--foot star--> <div class="footer"> <div class="m_box"> <div class="footer_in"> <a href="#" target="_blank">产品服务</a> <a href="#" target="_blank">发展历程</a> <a href="#" target="_blank">企业资讯</a> <a href="#" target="_blank">企业文化</a> <a href="#" target="_blank">关于我们</a> <a href="#" target="_blank">加入我们</a> <a href="#" target="_blank">联系我们</a> <a href="#" target="_blank">网站导航</a> <a href="#" target="_blank">网站律师</a> </div> <ul class="ftrlist"> <li> <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a> </li> <li> <a rel="nofollow" href="https://www.12377.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a> </li> <li> <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a> </li> <li> <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a> </li> <li class="last"> <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p> </a> </li> </ul> <div class="footer_co"> <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo_bottom.png" alt="懂视"></a> <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p> <p> <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a> </p> <p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p> </div> </div> </div> <!--foot end--> <a href="#0" class="cd-top">Top</a> <script type="text/javascript"> $(function(){ var _line=parseInt($(window).height()/3); $(window).scroll(function(){ if ($(window).scrollTop()>100) { $('.edu_top').css({'position':'fixed','top':'0','z-index':'99'}) }else{ $('.edu_top').css({'position':'relative','top':'0'}) } }) }) </script> <script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script> </body> </html>