TreeMind树图在线AI思维导图
当前位置:树图思维导图模板IT互联网互联网干货HTML表单知识思维导图

HTML表单知识思维导图

  收藏
  分享
免费下载
免费使用文件
大灰 浏览量:82022-11-20 23:17:19
已被使用0次
查看详情HTML表单知识思维导图

网站前端代码超文本标记语言基础知识点——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 属性

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

适用于输入类型

相关思维导图模板

什么是好的方案思维导图

树图思维导图提供 什么是好的方案 在线思维导图免费制作,点击“编辑”按钮,可对 什么是好的方案  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:3fabdcef96cf69341333d40629fddbe9

HTML语法思维导图

树图思维导图提供 HTML语法 在线思维导图免费制作,点击“编辑”按钮,可对 HTML语法  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:911d6ec52c951b8af704e21fcbb8eb06