表单创建表单form标签的属性input元素及属性input type属性input的其他属性其他表单元素 表单 创建表单表单是由表单控件,提示信息,表单域等构成HTML表单是用来搜集不同类型的用户信息。标签定义了表单,表单是HTML页面与浏览器端实现交互的重要手段。表单信息的处理过程:当点击表单的提交按钮时,输入在表单中的信息就会上传到服务器中,然后由服务器的有关应用程序进行处理,处理后或将用户提交的信息储存在服务器端的数据库中,或者将有关的信息返回到客户端浏览器上。对于一段信息,我们需要了解某些内容。对于表单,我们提交的内容是什么,提交给谁,用哪种方式提交,提交以后是什么反应。 form标签的属性name,method,action,autocomplete,novalidate。 name:表单的名称,通过为表单命名可以控制表单和后台程序之间的关系。method:method有两个值get和post。get方式是将表单内容附在URL地址后面,post方式是将表单中填写的数据包含在表单的主题中,get方式有长度限制,如果太长可能会被截去一部分,同时url是显示的,所以get的安全性不如post方式。从字面意义上理解,get方式应该是用于获取某些东西,post则是邮寄某些东西。action:用来定义表单处理程序的位置,其实也就是我们将表单送到哪里。autocomplete:autocomplete属性指定了表单是否能自动完成功能,就是表单控件会记录下内容,当再次输入时,会将输入的历史记录显示在一个下拉列表里novalidate:novalidate属性是指提交表单时取消对表单进行有效检查 input元素及属性| 属性 | 值 | 描述 | | —- | —- | —- | | accept | audio/ video/ image/ MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type=”file”) | | align | left right top middle bottom | HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type=”image”) | | alt | text | 定义图像输入的替代文本。 (只针对type=”image”) | | autocompleteNew | on off | autocomplete 属性规定 元素输入字段是否应该启用自动完成功能。 | | autofocusNew | autofocus | 属性规定当页面加载时 元素应该自动获得焦点。 | | checked | checked | checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=”checkbox” 或者 type=”radio”) | | disabled | disabled | disabled 属性规定应该禁用的 元素。 | | formNew | form_id | form 属性规定 元素所属的一个或多个表单。 | | formactionNew | URL | 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=”submit” 和 type=”image”) | | formenctypeNew | application/x-www-form-urlencoded multipart/form-data text/plain | 属性规定当表单数据提交到服务器时如何编码(只适合 type=”submit” 和 type=”image”)。 | | formmethodNew | get post | 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=”submit” 和 type=”image”) | | formnovalidateNew | formnovalidate | formnovalidate 属性覆盖 元素的 novalidate 属性。 | | formtargetNew | blank _self _parent _top _framename | 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=”submit” 和 type=”image”) | | heightNew | pixels | 规定 元素的高度。(只针对type=”image”) | | listNew | datalist_id | 属性引用 元素,其中包含 元素的预定义选项。 | | maxNew | number date | 属性规定 元素的最大值。 | | maxlength | number | 属性规定 元素中允许的最大字符数。 | | minNew | number date | 属性规定 元素的最小值。 | | multipleNew | multiple | 属性规定允许用户输入到 元素的多个值。 | | name | text | name 属性规定 元素的名称。 | | patternNew | regexp | pattern 属性规定用于验证 元素的值的正则表达式。 | | placeholderNew | text | placeholder 属性规定可描述输入 字段预期值的简短的提示信息 。 | | readonly | readonly | readonly 属性规定输入字段是只读的。 | | requiredNew | required | 属性规定必需在提交表单之前填写输入字段。 | | size | number | size 属性规定以字符数计的 元素的可见宽度。 | | src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=”image”) | | stepNew | number | step 属性规定 元素的合法数字间隔。 | | type | buttoncheckboxcolordatedatetimedatetime-localemailfilehiddenimagemonthnumberpasswordradiorangeresetsearchsubmitteltexttimeurlweek | type 属性规定要显示的 元素的类型。 | | value | text | 指定 元素 value 的值。 | | width*New | pixels | width 属性规定 元素的宽度。 (只针对type=”image”) | input type属性 button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) checkbox 定义复选框。 color 定义拾色器。 date 定义日期字段(带有 calendar 控件) datetime 定义日期字段(带有 calendar 和 time 控件) datetime-local 定义日期字段(带有 calendar 和 time 控件) month 定义日期字段的月(带有 calendar 控件) week 定义日期字段的周(带有 calendar 控件) time 定义日期字段的时、分、秒(带有 time 控件) email 定义用于 e-mail 地址的文本字段 file 定义输入字段和 “浏览…” 按钮,供文件上传 hidden 定义隐藏输入字段 image 定义图像作为提交按钮 number 定义带有 spinner 控件的数字字段 password 定义密码字段。字段中的字符会被遮蔽。 radio 定义单选按钮。 range 定义带有 slider 控件的数字字段。 reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 search 定义用于搜索的文本字段。 submit 定义提交按钮。提交按钮向服务器发送数据。 tel 定义用于电话号码的文本字段。 text 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。 url 定义用于 URL 的文本字段。 当type=number时还可以对输入框进行限制 value:指定输入框默认值 max:指定输入框可接受的最大值 min:指定输入框可接受的最小值 step:输入域合法的间隔,默认为1 input的其他属性autofocusautofocus属性规定在页面加载时,域自动地获得焦点autofous属性适用于button、input、keygen、select和textarea元素formform属性规定输入域所属的一个或多个表单,form属性必须和所属表单的idform属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔[注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效list大多数输入类型包含一个属性list,它和一个新元素datalist结合使用,这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示,而是为其他元素的list属性提供数据list属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color[注意]IE9-浏览器及safari浏览器不支持multiplemultiple属性规定按住ctrl按键,输入字段可以选择多个值该属性适用于type=”email”和”file”的input元素[注意]该属性IE9-浏览器不支持min,max,stepmin属性规定输入域所允许的最大值 max属性规定输入域所允许的最小值step属性为输入域规定合法的数字间隔min、max、step属性适用于以下类型的input元素:date pickers、number、rangepatternpattern属性规定用于验证input域的模式。模型pattern是正则表达式常用的正则表达式: 信用卡 [0-9]{13,16}银联卡 ^62[0-5]\d{13,16}$Visa: ^4[0-9]{12}(?:[0-9]{3})?$万事达:^5[1-5][0-9]{14}$QQ号码: [1-9][0-9]{4,14}手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$身份证:^([0-9]){7,18}(x|X)?$密码:^[a-zA-Z]\w{5,17}$ 字母开头,长度在6~18之间,只能包含字母、数字和下划线强密码:^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间7个汉字或14个字符:^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$ pattern属性适用于以下类型的input元素:text、search、url、tel、email、password[注意]IE9-浏览器及safari浏览器不支持placeholderplaceholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password[注意]IE9-浏览器不支持requiredrequired属性规定必须在提交之前填写输入域(不能为空)required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file[注意]IE9-浏览器及safari浏览器不支持 其他表单元素textarea多行纯文本编辑元素使用标签包裹。<br /><form> <textarea> 多行纯文本编辑元素的属性包括: name:用于设置随表单一同提交到服务器的相关数据的名字rows和cols:用于声明的精确尺寸。</li><li>disabled:第一次加载页面禁用该属性</li></ul> <p>readonly:该控件内容只读<br />另外还包括与<input>功能相同的属性包括:autocomplete、autofocus、placehold、required等。<br /><strong>select</strong><br />选项列表使用<select>标签包裹,可用于创建单选或者多选菜单,其中菜单项使用<option>标签包裹。<br /><form> <select> <option></option> </select> </form><br />选项列表元素的属性包括:</p> <ul> <li>multiple:布尔属性,表示列表中的选项是否支持多选。如没有声明该值时一次只能选中一个选项。</li><li>size:如果控件显示为滚动列表框,则此属性表示为控件中同时可见的行数。</li></ul> <p>其他属性包括:disabled、autocomplete、autofocus、required等。<br />菜单项的熟悉包括:</p> <ul> <li>selected:布尔属性,表明这个菜单项是否一开始就被选中。</li><li>value:这个属性的值表示该选项被选中时提交给表单的值。如果省略此属性,提交值就从选项元素扽文本内容中获取。</li><li>label:这个属性用于表示选项含义的文本,如果label属性没有定义,它的值就是元素文本内容。</li><li>disabled:布尔属性,同样用于表示该选项不可选。</li></ul> <p>datalist<br /><datalist> 元素为 <input> 元素规定<strong>预定义选项列表</strong>。<br />用户会在他们输入数据时看到预定义选项的下拉列表。<br /><input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。<br />option 元素永远都要设置 value 属性。<br />keygen</p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_autofocus.asp">autofocus</a></td> <td>autofocus</td> <td>使 keygen 字段在页面加载时获得焦点。</td> </tr> <tr> <td>challenge</td> <td>challenge</td> <td>如果使用,则将 keygen 的值设置为在提交时询问。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_disabled.asp">disabled</a></td> <td>disabled</td> <td>禁用 keytag 字段。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_form.asp">form</a></td> <td><em>formname</em></td> <td>定义该 keygen 字段所属的一个或多个表单。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_keytype.asp">keytype</a></td> <td>rsa</td> <td>定义 keytype。rsa 生成 RSA 密钥。</td> </tr> <tr> <td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_name.asp">name</a></td> <td><em>fieldname</em></td> <td>定义 keygen 元素的唯一名称。<br />name 属性用于在提交表单时搜集字段的值。</td> </tr> </tbody> </table> <p>keygen 元素的作用是提供一种验证用户的可靠方法。<br />keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。<br />私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。<br />目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。<br />output</p> <table> <thead> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>for</td> <td><em>id of another element</em></td> <td>定义输出域相关的一个或多个元素。</td> </tr> <tr> <td>form</td> <td><em>formname</em></td> <td>定义输入字段所属的一个或多个表单。</td> </tr> <tr> <td>name</td> <td><em>unique name</em></td> <td>定义对象的唯一名称。(表单提交时使用)</td> </tr> </tbody> </table> <p><output> 标签定义不同类型的输出,比如脚本的输出。</p>