2023年8月1日发(作者：)

什么标签⽤于在表单中构建复选框_前端学习笔记⼀⼀HTML表单标签（form）form表单细节⼀、表单1.表单标签⽤于为⽤户输⼊创建 HTML 表单2.表单能够包含 input 元素，⽐如⽂本字段、复选框、单选框、提交按钮等等。3.表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。4.表单⽤于向服务器传输数据。⼆、表单form 的属性(⼀)action属性action 属性规定当提交表单时，向何处发送表单数据属性值：url 链接的地址(⼆)name属性name属性规定表单的名称。 name 属性提供了⼀种在脚本中引⽤表单的⽅法。(三)method属性method 属性规定在提交表单时所⽤的HTTP⽅法(GET 或是 POST)1、什么时候使⽤GET？method属性的默认值是GET，如果表单的提交是被动的(⽐如搜索引擎查询)，并且没有敏感信息；当使⽤GET的时候，表单数据是提交到页⾯的地址栏中的。2、什么时候使⽤post？地址栏中可以储存的数据是有限的，如果想要储存更多数据，更安全的储存数据就需要使⽤ post表单正在更新数据，或是包含敏感信息(例如密码)最好使⽤post；post 安全性更好，因为在页⾯地址栏中提交的数据使不可见的(如果上传的数据⽐较多或是要上传图⽚，就要使⽤post)。(四)legend元素元素为 元素定义标签标签 可以将表单内的相关元素分组，还可以在相关表单元素周围绘制边框。Personalia: Name:

Email:input元素必须要加上 name 属性，定义⼀个名字，后台才会正常接收输⼊的数据；三、表单描述标签的使⽤为input元素定义标注⽂字label 元素不会向⽤户呈现任何特殊效果。不过，它为⿏标⽤户改进了可⽤性。如果在 label 元素内点击⽂本，就会触发此控件，使该控件获得焦点。当⽤户选择该标签时，浏览器就会⾃动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同。为了实现同样的效果，会有另⼀种写法：不需要 for 和 id 属性；⽂字四、表单约束属性(⼀)required 属性required 属性是⼀个布尔属性，规定必须在提交表单之前填写输⼊字段，必填字段。(required是H5的新属性)注意：required 属性适⽤于下⾯的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。(⼆)placeholder属性placeholder 属性规定可描述输⼊字段预期值的简短的提⽰信息( 在输⼊框⾥⾯的提⽰⽂字，内容不会被提交)，例如⼀个样本值或是预期格式的简短的描述。placeholder 定义的提⽰会在⽤户输⼊值之前显⽰在输⼊字段中。注意：placeholder 属性适⽤于下⾯的 input 类型：text、search、url、tel、email 和 password。(三)value属性value 属性为 input 元素设定值。对于不同的输⼊类型，value属性的⽤法也不同。type类型为button、reset、submit。定义按钮上显⽰的⽂本；type类型为text、password、hidden。定义输⼊字段的初始值(默认值)；type类型为checkbox、radio、image。定义输⼊相关联的值；注意： 和 中必须设置 value 属性。注意：value 属性⽆法与 ⼀同使⽤。(四)maxlength属性maxlength 属性规定输⼊字段的最⼤长度，以字符个数计算。maxlength 属性与 或 配合使⽤(有输⼊长度)(五)size属性size 属性规定以字符数计的 元素的可见宽度。size 限制表单的长度(不建议⽤，⽤CSS去设置更好)五、表单访问限制(表单禁⽤)(⼀)readonly 属性readonly 属性规定输⼊字段为只读，⽆法输⼊，可以使⽤value来设置默认值，可以提交到后台，但是⽤户⽆法修改。只读字段⽆法修改，不过⽤户仍然可以使⽤tab键切换到该字段，还可以选中或拷贝其⽂本。readonly 属性可以防⽌⽤户对值进⾏修改，直到满⾜某些条件为⽌(⽐如选中了⼀个复选框)。然后，需要使⽤ JavaScript 消除 readonly值，将输⼊字段切换到可编辑状态。readonly 属性可与 或 配合使⽤。(⼆)disabled属性disabled 属性定义应该禁⽤input元素(只能看，不能提交到后台)被禁⽤的 input元素既不可⽤，也不可点击。可以设置 disabled 属性，直到满⾜某些其他的条件为⽌(⽐如选择了⼀个复选框等等)。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可⽤。注意：disabled 属性⽆法与 ⼀起使⽤。六、常⽤的字段扩展类型值描述button定义可点击按钮(多数情况下，⽤于通过 JavaScript 启动脚本)。checkbox定义复选框。file定义输⼊字段和 "浏览"按钮，供⽂件上传。hidden定义隐藏的输⼊字段，虽然隐藏了却依然存在。image定义图像作为提交按钮。password定义密码字段。该字段中的字符被掩码。radio定义单选按钮。reset定义重置按钮。重置按钮会清除表单中的所有数据。submit定义提交按钮。提交按钮会把表单数据发送到服务器。text定义单⾏的输⼊字段，⽤户可在其中输⼊⽂本。默认宽度为 20 个字符。H5新标签值描述color定义拾⾊器date定义 date 控件(包括年、⽉、⽇，不包括时间)datetime定义 date 和 time 控件(包括年、⽉、⽇、时、分、秒、⼏分之⼀秒，基于 UTC 时区)datetime-local定义 date 和 time 控件(包括年、⽉、⽇、时、分、秒、⼏分之⼀秒，不带时区)email定义⽤于 e-mail 地址的字段month定义 month 和 year 控件(不带时区)number定义⽤于输⼊数字的字段range定义⽤于精确值不重要的输⼊数字的控件(⽐如 slider 控件)search定义⽤于输⼊搜索字符串的⽂本字段tel定义⽤于输⼊电话号码的字段time定义⽤于输⼊时间的控件(不带时区)url定义⽤于输⼊ URL 的字段week定义 week 和 year 控件(不带时区)七、⼤量⽂本和列表(⼀)⽂本域textarea 标签定义⼀个多⾏的⽂本输⼊控件⽂本域中可容纳⽆限数量的⽂本，其中的⽂本的默认字体是等宽字体(Courier)⽂本域中的默认值，要放在⼀对textarea 标签中可以通过 cols 和 rows 属性来规定 textarea 的尺⼨⼤⼩，不过更好地·办法是使⽤CSS的height 和 width属性(⼆)列表框select 元素可以创建单选或是多选菜单。option标签⽤于定义列表中的可⽤选项，即列表项；optgroup标签 定义列表项分组123 Volvo4 Saab567 Mercedes8 Audi910(三)multiple 属性multiple属性定义多选，multiple 属性可以设置或是返回是否可以有多个选项被选中。multiple 的⽤法：设置 multiple属性le=true|false返回multiple属性le⼋、选项框标准打开⽅式(⼀)radio 类型radio 单选框 ，当⽤户点击⼀个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为⾮选中状态。男性：⼥性：(⼆)checkbox 类型定义了复选框. ⽤户需要从若⼲给定的选择中选取⼀个或若⼲选项，可以多个同时选中。I have a bikeI have a car(三)checked 属性checked 属性是⼀个布尔属性。checked 属性规定在页⾯加载时应该被预先选定的 元素。checked 属性适⽤于 和 。九、⽂件上传(⼀)file 类型file类型 定义输⼊字段和 "浏览"按钮，供⽂件上传(⼆)enctype 属性form 标签中定义的enctype 属性规定在发送到服务器之前应该如何对表单数据进⾏编码。默认地，表单数据会编码为"application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进⾏编码(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)属性值：application/x-www-form-urlencoded 在发送前编码所有字符(默认)multipart/form-data 不对字符进⾏编码。在使⽤包含⽂件上传控件的表单时，必须使⽤该值！text/plain 空格转换为 "+" 加号，但不对特殊字符编码(三)accept 属性accept 规定上传⽂件的类型，如果多个类型可以使⽤逗号隔开，例如：accept="image/png,image/jpg"(这能上传png类型的图⽚)accept 属性只能与 配合使⽤。它规定能够通过⽂件上传进⾏提交的⽂件类型。注意：请避免使⽤该属性。应该在服务器端验证⽂件上传。(四)multiple 属性file ⽂件上传 配合 multiple属性可以上传多个⽂件；multiple 属性规定输⼊字段可选择多个值。如果使⽤该属性，则字段可接受多个值。注意：multiple 属性使⽤欧冠与以下 类型：email 和 file⼗、⽇期在表单中的使⽤(⼀)date 类型date 获得⽇期，包括年⽉⽇。1、使⽤mix和max定义开始和结束时间 如：min="2030-02-02"2、也可使⽤step属性设置步长(间隔⼏天才可以选中)(⼆)datetime 类型定义 date 和 time 控件，获得⽇期和时间，包括年、⽉、⽇、时、分、秒、⼏分之⼀秒。(三)time 类型获得时间，定义⽤于输⼊时间的控件(不带时区)。(四)week 类型week类型 获得年份和周数(五)month 类型month 类型 获得年和⽉(六)datetime-local 类型datetime-local 年⽉⽇时分秒⼗⼀、搜索表单和datalist数据列表(⼀)search 类型search类型 可以定义搜索框，但需要input type=search外⾯包上⼀层带action属性的form。(⼆)datalist 标签标签规定了 元素可能的选项列表。为input 元素提供‘⾃动完成’的特性。⽤户能看到⼀个下拉列表，⾥⾯是预先定义好的内容。这些内容将作为⽤户输⼊的数据。为 datalist 元素添加 id，其他 input 元素通过 list 属性指向 datalist 的id，从⽽绑定 datalist 元素⼀对 option 标签中的是提⽰⽂字，如果不想有提⽰⽂字，可以将 option 变成单标签兼容性不好>⼗⼆、表单历史数据⾃动提⽰autocompleteautocomplete属性type=search 会有许多默认样式和⾏为，会默认下拉框显⽰历史搜索记录，在不同的浏览器或是设备上会有不同显⽰效果。autocomplete 属性规定表单是否应该启⽤⾃动完成功能。⾃动完成允许浏览器预测对字段的输⼊。当⽤户在字段开始输⼊时，浏览器基于之前输⼊过的历史记录，显⽰出字段中填写的选项。注意：除了 Opera，其他主流浏览器都⽀持 autocomplete 属性注意：autocomplete "on" 适⽤于表单，"off" 适⽤于特定的输⼊字段，反之亦然。属性值：off 输⼊的时候没有历史提⽰，规定禁⽤⾃动完成功能。⽤户必须在每次使⽤时输⼊值到每个字段中，浏览器不会⾃动完成输⼊on 输⼊的时候会有历史提⽰，默认。规定启⽤⾃动完成功能。浏览器会基于⽤户之前键⼊的值⾃动完成值First name:E-mail:

2023年8月1日发(作者：)

什么标签⽤于在表单中构建复选框_前端学习笔记⼀⼀HTML表单标签（form）form表单细节⼀、表单1.表单标签⽤于为⽤户输⼊创建 HTML 表单2.表单能够包含 input 元素，⽐如⽂本字段、复选框、单选框、提交按钮等等。3.表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。4.表单⽤于向服务器传输数据。⼆、表单form 的属性(⼀)action属性action 属性规定当提交表单时，向何处发送表单数据属性值：url 链接的地址(⼆)name属性name属性规定表单的名称。 name 属性提供了⼀种在脚本中引⽤表单的⽅法。(三)method属性method 属性规定在提交表单时所⽤的HTTP⽅法(GET 或是 POST)1、什么时候使⽤GET？method属性的默认值是GET，如果表单的提交是被动的(⽐如搜索引擎查询)，并且没有敏感信息；当使⽤GET的时候，表单数据是提交到页⾯的地址栏中的。2、什么时候使⽤post？地址栏中可以储存的数据是有限的，如果想要储存更多数据，更安全的储存数据就需要使⽤ post表单正在更新数据，或是包含敏感信息(例如密码)最好使⽤post；post 安全性更好，因为在页⾯地址栏中提交的数据使不可见的(如果上传的数据⽐较多或是要上传图⽚，就要使⽤post)。(四)legend元素元素为 元素定义标签标签 可以将表单内的相关元素分组，还可以在相关表单元素周围绘制边框。Personalia: Name:

Email:input元素必须要加上 name 属性，定义⼀个名字，后台才会正常接收输⼊的数据；三、表单描述标签的使⽤为input元素定义标注⽂字label 元素不会向⽤户呈现任何特殊效果。不过，它为⿏标⽤户改进了可⽤性。如果在 label 元素内点击⽂本，就会触发此控件，使该控件获得焦点。当⽤户选择该标签时，浏览器就会⾃动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同。为了实现同样的效果，会有另⼀种写法：不需要 for 和 id 属性；⽂字四、表单约束属性(⼀)required 属性required 属性是⼀个布尔属性，规定必须在提交表单之前填写输⼊字段，必填字段。(required是H5的新属性)注意：required 属性适⽤于下⾯的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。(⼆)placeholder属性placeholder 属性规定可描述输⼊字段预期值的简短的提⽰信息( 在输⼊框⾥⾯的提⽰⽂字，内容不会被提交)，例如⼀个样本值或是预期格式的简短的描述。placeholder 定义的提⽰会在⽤户输⼊值之前显⽰在输⼊字段中。注意：placeholder 属性适⽤于下⾯的 input 类型：text、search、url、tel、email 和 password。(三)value属性value 属性为 input 元素设定值。对于不同的输⼊类型，value属性的⽤法也不同。type类型为button、reset、submit。定义按钮上显⽰的⽂本；type类型为text、password、hidden。定义输⼊字段的初始值(默认值)；type类型为checkbox、radio、image。定义输⼊相关联的值；注意： 和 中必须设置 value 属性。注意：value 属性⽆法与 ⼀同使⽤。(四)maxlength属性maxlength 属性规定输⼊字段的最⼤长度，以字符个数计算。maxlength 属性与 或 配合使⽤(有输⼊长度)(五)size属性size 属性规定以字符数计的 元素的可见宽度。size 限制表单的长度(不建议⽤，⽤CSS去设置更好)五、表单访问限制(表单禁⽤)(⼀)readonly 属性readonly 属性规定输⼊字段为只读，⽆法输⼊，可以使⽤value来设置默认值，可以提交到后台，但是⽤户⽆法修改。只读字段⽆法修改，不过⽤户仍然可以使⽤tab键切换到该字段，还可以选中或拷贝其⽂本。readonly 属性可以防⽌⽤户对值进⾏修改，直到满⾜某些条件为⽌(⽐如选中了⼀个复选框)。然后，需要使⽤ JavaScript 消除 readonly值，将输⼊字段切换到可编辑状态。readonly 属性可与 或 配合使⽤。(⼆)disabled属性disabled 属性定义应该禁⽤input元素(只能看，不能提交到后台)被禁⽤的 input元素既不可⽤，也不可点击。可以设置 disabled 属性，直到满⾜某些其他的条件为⽌(⽐如选择了⼀个复选框等等)。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可⽤。注意：disabled 属性⽆法与 ⼀起使⽤。六、常⽤的字段扩展类型值描述button定义可点击按钮(多数情况下，⽤于通过 JavaScript 启动脚本)。checkbox定义复选框。file定义输⼊字段和 "浏览"按钮，供⽂件上传。hidden定义隐藏的输⼊字段，虽然隐藏了却依然存在。image定义图像作为提交按钮。password定义密码字段。该字段中的字符被掩码。radio定义单选按钮。reset定义重置按钮。重置按钮会清除表单中的所有数据。submit定义提交按钮。提交按钮会把表单数据发送到服务器。text定义单⾏的输⼊字段，⽤户可在其中输⼊⽂本。默认宽度为 20 个字符。H5新标签值描述color定义拾⾊器date定义 date 控件(包括年、⽉、⽇，不包括时间)datetime定义 date 和 time 控件(包括年、⽉、⽇、时、分、秒、⼏分之⼀秒，基于 UTC 时区)datetime-local定义 date 和 time 控件(包括年、⽉、⽇、时、分、秒、⼏分之⼀秒，不带时区)email定义⽤于 e-mail 地址的字段month定义 month 和 year 控件(不带时区)number定义⽤于输⼊数字的字段range定义⽤于精确值不重要的输⼊数字的控件(⽐如 slider 控件)search定义⽤于输⼊搜索字符串的⽂本字段tel定义⽤于输⼊电话号码的字段time定义⽤于输⼊时间的控件(不带时区)url定义⽤于输⼊ URL 的字段week定义 week 和 year 控件(不带时区)七、⼤量⽂本和列表(⼀)⽂本域textarea 标签定义⼀个多⾏的⽂本输⼊控件⽂本域中可容纳⽆限数量的⽂本，其中的⽂本的默认字体是等宽字体(Courier)⽂本域中的默认值，要放在⼀对textarea 标签中可以通过 cols 和 rows 属性来规定 textarea 的尺⼨⼤⼩，不过更好地·办法是使⽤CSS的height 和 width属性(⼆)列表框select 元素可以创建单选或是多选菜单。option标签⽤于定义列表中的可⽤选项，即列表项；optgroup标签 定义列表项分组123 Volvo4 Saab567 Mercedes8 Audi910(三)multiple 属性multiple属性定义多选，multiple 属性可以设置或是返回是否可以有多个选项被选中。multiple 的⽤法：设置 multiple属性le=true|false返回multiple属性le⼋、选项框标准打开⽅式(⼀)radio 类型radio 单选框 ，当⽤户点击⼀个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为⾮选中状态。男性：⼥性：(⼆)checkbox 类型定义了复选框. ⽤户需要从若⼲给定的选择中选取⼀个或若⼲选项，可以多个同时选中。I have a bikeI have a car(三)checked 属性checked 属性是⼀个布尔属性。checked 属性规定在页⾯加载时应该被预先选定的 元素。checked 属性适⽤于 和 。九、⽂件上传(⼀)file 类型file类型 定义输⼊字段和 "浏览"按钮，供⽂件上传(⼆)enctype 属性form 标签中定义的enctype 属性规定在发送到服务器之前应该如何对表单数据进⾏编码。默认地，表单数据会编码为"application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进⾏编码(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)属性值：application/x-www-form-urlencoded 在发送前编码所有字符(默认)multipart/form-data 不对字符进⾏编码。在使⽤包含⽂件上传控件的表单时，必须使⽤该值！text/plain 空格转换为 "+" 加号，但不对特殊字符编码(三)accept 属性accept 规定上传⽂件的类型，如果多个类型可以使⽤逗号隔开，例如：accept="image/png,image/jpg"(这能上传png类型的图⽚)accept 属性只能与 配合使⽤。它规定能够通过⽂件上传进⾏提交的⽂件类型。注意：请避免使⽤该属性。应该在服务器端验证⽂件上传。(四)multiple 属性file ⽂件上传 配合 multiple属性可以上传多个⽂件；multiple 属性规定输⼊字段可选择多个值。如果使⽤该属性，则字段可接受多个值。注意：multiple 属性使⽤欧冠与以下 类型：email 和 file⼗、⽇期在表单中的使⽤(⼀)date 类型date 获得⽇期，包括年⽉⽇。1、使⽤mix和max定义开始和结束时间 如：min="2030-02-02"2、也可使⽤step属性设置步长(间隔⼏天才可以选中)(⼆)datetime 类型定义 date 和 time 控件，获得⽇期和时间，包括年、⽉、⽇、时、分、秒、⼏分之⼀秒。(三)time 类型获得时间，定义⽤于输⼊时间的控件(不带时区)。(四)week 类型week类型 获得年份和周数(五)month 类型month 类型 获得年和⽉(六)datetime-local 类型datetime-local 年⽉⽇时分秒⼗⼀、搜索表单和datalist数据列表(⼀)search 类型search类型 可以定义搜索框，但需要input type=search外⾯包上⼀层带action属性的form。(⼆)datalist 标签标签规定了 元素可能的选项列表。为input 元素提供‘⾃动完成’的特性。⽤户能看到⼀个下拉列表，⾥⾯是预先定义好的内容。这些内容将作为⽤户输⼊的数据。为 datalist 元素添加 id，其他 input 元素通过 list 属性指向 datalist 的id，从⽽绑定 datalist 元素⼀对 option 标签中的是提⽰⽂字，如果不想有提⽰⽂字，可以将 option 变成单标签兼容性不好>⼗⼆、表单历史数据⾃动提⽰autocompleteautocomplete属性type=search 会有许多默认样式和⾏为，会默认下拉框显⽰历史搜索记录，在不同的浏览器或是设备上会有不同显⽰效果。autocomplete 属性规定表单是否应该启⽤⾃动完成功能。⾃动完成允许浏览器预测对字段的输⼊。当⽤户在字段开始输⼊时，浏览器基于之前输⼊过的历史记录，显⽰出字段中填写的选项。注意：除了 Opera，其他主流浏览器都⽀持 autocomplete 属性注意：autocomplete "on" 适⽤于表单，"off" 适⽤于特定的输⼊字段，反之亦然。属性值：off 输⼊的时候没有历史提⽰，规定禁⽤⾃动完成功能。⽤户必须在每次使⽤时输⼊值到每个字段中，浏览器不会⾃动完成输⼊on 输⼊的时候会有历史提⽰，默认。规定启⽤⾃动完成功能。浏览器会基于⽤户之前键⼊的值⾃动完成值First name:E-mail: