html表单怎么制作，html表单代码-励北网

put 请求替换服务器端文档内容；
trace 用于诊断服务器；
connect 将连接设置成管道方式的代理服务器，用于 HTTP1.1

1.6 novalidate 属性

当设置时，表单不会验证输入，否则的话当点击提交按钮时，浏览器会根据表单输入框的类型来验证输入内容是否合法，例如：

<form action="" method="post" novalidate> <h2>提交时不验证</h2> <h3>登录</h3> <div> <label for="user_name">用户名</label> <input id="user_name" name="user_name" autofocus="" required=""> </div> <div> <label for="password">密码</label> <input id="password" name="password" type="password" autocomplete="off" value="" required=""> </div> <div> <button type='submit'>登录</button> </div> </form> <form action="" method="post"> <h2>提交时验证</h2> <h3>登录</h3> <div> <label for="user_name">用户名</label> <input id="user_name" name="user_name" autofocus="" required=""> </div> <div> <label for="password">密码</label> <input id="password" name="password" type="password" autocomplete="off" value="" required=""> </div> <div> <button type='submit'>登录</button> </div> </form>

上述代码，当点击登陆按钮时，浏览器会验证用户名是否输入，密码是否输入，未输入的话浏览器会提示，并且提交不成功。novalidate 属性适用于：form，以及以下类型的标签：text, search, url, telephone, email, password, date pickers, range 以及 color，复杂的规则需要结合 required 属性验证。

1.7 target 属性

这个属性用户设置表单提交之后浏览器的跳转地址，默认是在当前页面打开新地址，可选值有：

_blank 新窗口；
_self 默认，当前窗口；
_parent 父窗口；
_top 最顶层窗口；
_framename 指定的框架

例如：

<form action="https://www.baidu.com" method="post" target="_blank"> <h2>表单提交后跳转到新窗口</h2> <h3> 登录 </h3> <div> <label for="user_name">用户名</label> <input id="user_name" name="user_name" autofocus="" required=""> </div> <div> <label for="password">密码</label> <input id="password" name="password" type="password" autocomplete="off" value="" required=""> </div> <div> <button type='submit'>登录</button> </div> </form>

上述代码会在提交完数据之后，在一个新的浏览器界面中打开百度的首页。

2. input

表单内的标签，用于记录用户输入信息，可以是文本框、复选框、单选框、日期、数字、日期、按钮、文件、密码、隐藏域等等。

2.1 文本框

文本框是表单中最常见的表单控件，没有设置样式的话，默认是一个长方形的输入框，获取焦点时外边框变蓝色，当设置 type=text 就定义了一个文本框，例如：

2.2 复选框

复选框用于对多个选项进行复合选择，网站开发中让用户选择兴趣爱好、技能标签等可以使用复选框，使用 type=checkbox 定义复选框：

<div class="div_title_question_all"> <div id="divTitle5" class="div_title_question">从未使用网约车的原因是：<span class="qtypetip"> 【多选题】</span></div> </div> <div class="div_table_radio_question" id="divquestion5"> <ul class="ulradiocheck" style='list-style-type:none'> <li style="width:99%;"><input id="q5_1" type="checkbox" name="q5" value="不熟悉叫车程序"><label>不熟悉叫车程序</label></li> <li style="width:99%;"><input id="q5_2" type="checkbox" name="q5" value="习惯小汽车出行"><label>习惯小汽车出行</label></li> <li style="width: 99%;"><input id="q5_3" type="checkbox" name="q5" value="周边公共交通服务便利"><label>周边公共交通服务便利</label></li> <li style="width: 99%;"><input id="q5_4" type="checkbox" name="q5" value="出租车服务便利"><label>出租车服务便利</label></li> <li style="width: 99%;"><input id="q5_5" type="checkbox" name="q5" value="担忧网约车安全性"><label>担忧网约车安全性</label></li> <li style="width: 99%;"><input id="q5_5" type="checkbox" name="q5" value="担忧网约车安全性"><label>担忧网约车安全性</label></li> <li style="width: 99%;"><button onclick='formSubmit()'>结果</button></li> </ul> </div> <script> function formSubmit() {//点击按钮获取复选框结果 var obj = document.getElementsByName("q5"); var check_arr = []; for (var i = 0; i < obj.length; i++) { if (obj[i].checked) check_arr.push(obj[i].value); } alert("您的选项是："+check_arr); } </script>

上述代码示例中当用户点击结果按钮时，使用 JavaScript 获取已选中的复选框的 value 值，并打印结果。

2.3 单选框

和复选框比较类似，单选框也是用来作为选项的，不同的是单选框只能选择一个，但是是在一个单选框组内才行，同一个组的 name 值必须相同，定义单选框的方式是设置 type=radio：

<div class="div_title_question_all"> <div id="divTitle2" class="div_title_question">您的年龄段：<span class="req">*</span></div> </div> <div class="div_table_radio_question" id="divquestion2"> <ul class="ulradiocheck" style=" list-style-type:none"> <li style="width: 19%;"><input type="radio" name="q2" id="q2_1" value="1"><label for="q2_1">18岁以下</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_2" value="2"><label for="q2_2">18~25</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_3" value="3"><label for="q2_3">26~30</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_4" value="4"><label for="q2_4">31~35</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_5" value="5"><label for="q2_5">36~40</label></li> <li style="width: 19%;"><input type="radio" name="q2" id="q2_6" value="6"><label for="q2_6">41~45</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_7" value="7"><label for="q2_7">46~50</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_8" value="8"><label for="q2_8">51~55</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_9" value="9"><label for="q2_9">56~60</label></li> <li style="width:19%;"><input type="radio" name="q2" id="q2_10" value="10"><label for="q2_10">60岁以上</label></li> </ul> </div>