HTML表单知识思维导图

大灰

2022-11-20

浏览量: 5

HTML

超文本标记语言

表单知识

网站前端代码超文本标记语言基础知识点——HTML表单知识

树图思维导图提供《HTML表单知识》在线思维导图免费制作，点击“编辑”按钮，可对《HTML表单知识》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9cc65b6a592b5b4885a8472dd3b1b96d

思维导图大纲

表单

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 新增输入类型

用于应该包含数字值的输入字段

能够对数字做出限制 eg.min max

用于应该包含日期的输入字段

日期选择器会出现输入字段中

用于应该包含颜色的输入字段

颜色选择器会出现输入字段中

用于应该包含一定范围内的值的输入字段

输入字段能够显示为滑块控件

用于应该包含电子邮件地址的输入字段

在被提交时自动对电子邮件地址进行验证

输入属性

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 属性

规定在提交表单之前必须填写输入字段

适用于输入类型

表单基础思维导图

U345064159

3.42

树图思维导图提供《表单基础》在线思维导图免费制作，点击“编辑”按钮，可对《表单基础》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：1529e39372f192246c73be167c01fa6e

注册思维导图

U859323018

1.2

树图思维导图提供《注册》在线思维导图免费制作，点击“编辑”按钮，可对《注册》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：a28f4e2bd42a735ee490fb17a00277f6

思维导图模板

IT互联网

互联网干货

正文

相似思维导图模版

思维导图模版推荐

JavaScript思维导图

2022-11-20 23:21:05

工作能力的小窍门帮助你了解提高工作效率思维导图

首页

我的文件

我的团队

个人中心

HTML表单知识思维导图

思维导图大纲

相关思维导图模版

表单

表单元素

输入类型

输入属性

相似思维导图模版

思维导图模版推荐