网站前端代码超文本标记语言基础知识点——HTML表单知识
树图思维导图提供 HTML表单知识 在线思维导图免费制作,点击“编辑”按钮,可对 HTML表单知识 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:9cc65b6a592b5b4885a8472dd3b1b96d
HTML表单思维导图模板大纲
表单
HTML 表单用于搜集不同类型的用户输入
<form> 元素定义 HTML 表单
表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
<input> 元素
文本输入 <input type="text">
单选按钮输入 <input type="radio">
提交按钮 <input type="submit">
属性
action 属性 定义在提交表单时执行的动作
method 属性 规定在提交表单时所用的 HTTP 方法
GET(默认方法):如果表单提交是被动的,并且没有敏感信息
POST:如果表单正在更新数据,或者包含敏感信息
name 属性 每个输入字段必须设置一个 name 属性
用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题
<input> 元素
<input> 元素根据不同的 type 属性,可以变化为多种形态
<select> 元素(下拉列表)
<select> 元素定义下拉列表
<option> 元素定义待选择的选项
通过添加 selected 属性来定义预定义选项
<textarea> 元素
<textarea> 元素定义多行输入字段(文本域)
<button> 元素
<button> 元素定义可点击的按钮
HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性
<input type="text"> 定义供文本输入的单行输入字段
<input type="password"> 定义密码字段
<input type="submit"> 定义提交表单数据至表单处理程序的按钮
<input type="radio"> 定义单选按钮
<input type="checkbox"> 定义复选框
<input type="button> 定义按钮
HTML5 新增输入类型
<input type="number">
用于应该包含数字值的输入字段
能够对数字做出限制 eg.min max
<input type="date">
用于应该包含日期的输入字段
日期选择器会出现输入字段中
<input type="color">
用于应该包含颜色的输入字段
颜色选择器会出现输入字段中
<input type="range">
用于应该包含一定范围内的值的输入字段
输入字段能够显示为滑块控件
<input type="email">
用于应该包含电子邮件地址的输入字段
在被提交时自动对电子邮件地址进行验证
value属性 规定输入字段的初始值
readonly属性 规定输入字段为只读(readonly属性不需要值)
disabled属性 规定输入字段是禁用的(disabled属性不需要值)
size属性 规定输入字段的尺寸(以字符计)
maxlength属性 规定输入字段允许的最大长度
如需安全地限制输入,则接受者(服务器)必须同时对限制进行检查
HTML5新增属性
autocomplete 属性
规定表单或输入字段是否应该自动完成
可以把表单的 autocomplete 设置为 on
autocomplete 属性适用于 <form> 以及 <input> 类型
novalidate 属性
属于 <form> 属性
novalidate 规定在提交表单时不对表单数据进行验证
autofocus 属性
规定当页面加载时 <input> 元素应该自动获得焦点
form 属性
规定 <input> 元素所属的一个或多个表单
如需引用一个以上的表单,使用空格分隔的表单 id 列表
formaction 属性
覆盖 <form> 元素的 action 属性
适用于 type="submit" 以及 type="image"
formenctype 属性
覆盖 <form> 元素的 enctype 属性
适用于 type="submit" 以及 type="image"
formmethod 属性
覆盖 <form> 元素的 method 属性
适用于 type="submit" 以及 type="image"
formnovalidate 属性
覆盖 <form> 元素的 novalidate 属性
可用于 type="submit"
formtarget 属性
覆盖 <form> 元素的 target 属性
可与 type="submit" 和 type="image" 使用
height 和 width 属性
仅用于 <input type="image">
始终规定图像的尺寸
list 属性
list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项
min 和 max 属性
适用于如下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week
multiple 属性
允许用户在 <input> 元素中输入一个以上的值
适用于以下输入类型:email 和 file
pattern 属性
用于检查 <input> 元素值的正则表达式
适用于以下输入类型:text、search、url、tel、email、and password
placeholder 属性
用以描述输入字段预期值的提示(样本值或有关格式的简短描述)
适用于以下输入类型:text、search、url、tel、email 以及 password
required 属性
规定在提交表单之前必须填写输入字段
适用于输入类型