表单input标签type属性详解

目标：详解表单input标签type属性常用的属性值

一、input标签和它的type属性
PS：input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的type属性值，可以限制输入的内容。

二、总结
1、text 一个单行文本框，默认属性值
2、password 隐藏字符的密码框
3、search 搜索框，在某些浏览器中输入内容会出现叉形标记
4、submit、reset、button 依次是：提交按钮、重置按钮、普通按钮
5、number、range 依次是：只能输入数值的框、只能输入在一个指定范围的数值框
6、checkbox、radio 依次是：复选框，一组复选框(name属性值相同)用户可以勾选多个、单选按钮，一组单选按钮(name属性值相同)用户只可以选中一个
7、image、color 依次是：图片按钮、颜色代码按钮
8、email、tel、url 依次是：检测电子邮件、号码、网址的文本框
9、hidden 生成一个隐藏控件
10、file 生成一个上传控件
11、获取各种日期、时间 data、month、time、week、datetime、datatime-local

三、详解
1、type=”text”
1.1)、list 指定为文本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值
1.2)、maxlength 设置文本最大字符长度
1.3)、pattern 用于输入验证的正则表达式
1.4)、placeholder 输入提示的文本，当用户输入内容时会自动消失
1.5)、readonly 文本框处于只读状态
1.6)、disabled 文本框处于禁用状态
1.7)、size 设置文本框宽度
1.8)、value 设置文本框初始值，会显示在文本框中，显示时优先级比placeholder高，表单提交时优先提交用户输入的内容，如果用户没有输入则提交默认的值
1.9)、required 表示用户必须输入一个值，否则无法通过输入验证

2、type=”password”，和type=”text”时所拥的额外属性基本一致，少了一个list属性

3、type=”search” ，和type=”text”所有用的额外属性值一致

4、当type为submit、reset、button，提交表单、重置表单、普通按钮
4.1)、如果是 submit 时，还提供了和元素一样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。

5、当type为number、range时
5.1)、type=”number” 只能输入数字的文本框
5.2)、type=”range” 生成一个通过拖拽调节大小的调节器
额外属性：
5.3)、min 设置可接受的最小值
5.4)、max 设定可接受的最大值
5.5)、value 指定初始值
5.6)、step 指定上下调节值的步长
5.7)、required 表明用户必须输入一个值，否则无法通过输入验证
5.8)、readonly 设置文本框内容只读

6、当type为checkbox、radio
6.1)、不管type等于checkbox还是radio，都必须有属性name和value
6.2)、他们还有可选属性checked、required
PS：复选框和单选按钮都是以一组一组的形式存在，name值相同的即为一组，一组复选框可以同时选中几个，而一组单选按钮同时只能选中一个

<section><label for="c">C</label>            <input type="checkbox" id="c" name="hobby" value="c"/><label for="python">python</label>   <input type="checkbox" id="python" name="hobby" value="python"/><label for="java">java</label>       <input type="checkbox" id="java" name="hobby"  value="java"/>
</section>
<section><label for="apple">apple</label>     <input type="checkbox" id="apple" name="eat" value="apple"/><label for="orange">orange</label>  <input type="checkbox" id="orange" name="eat" value="orange"/><label for="pear">pear</label>      <input type="checkbox" id="pear" name="eat"  value="pear"/>
</section>

  提交时数据格式：hobby=c&hobby=python&eat=orange&eat=pear

<section><label for="man">男</label> <input type="radio" id="man" name="sex" value="man"/><label for="men">女</label> <input type="radio" id="men" name="sex" value="men"/>
</section>

  提交时数据格式：sex=man

7、当type为image、color
7.1)、当type=”image”时，功能上和type=”submit”一样，前者是用图片作为按钮，当然后者也可以达到同样的效果
额外属性：
7.2)、src 指定要显示图像的 URL
7.3)、alt 提供图片的文字说明，当图片找不到时显示该文字
7.4)、width 图像的长度，注意这是标签属性，而不是样式属性
7.5)、height 图片的高度，注意事项如上
7.6)、提交时的额外属性 formaction、formenctype、formmethod、formtarget和 formnovalidate。

8、当type为email、tel、url
8.1)、email 为电子邮件格式
8.2)、tel 为电话格式
8.3)、url 为网址格式
8.4)、额外属性和 text一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到 http://就能通过。

9、type=”hidden”
9.1)、生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在

10、type=”file”
10.1)、生成一个文件上传控件，用于文件的上传。
额外属性：
10.2)、required 表明用户必须提供一个值，否则无法通过验证
10.3)、accept 指定接收的MIME类型　例如：accept=”image/gif, image/jpeg, image/png”
ＰＳ：当需要上传文件时，form标签的enctype属性必须设置为multipart/form-data

11、当type为data、month、time、week、datetime、datatime-local，因为各种原因还是用jquery等前端库写吧！！！

表单input标签type属性详解相关推荐

前端：HTML5/36/HTML5简介，文档类型定义，网页字符集，页面结构标记，文章相关的标记，其它标记，音频标记，视频标记，表单中新增的属性，表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...
script标签type属性详解
1.(这是我们常用的)省略或 JavaScript MIME 类型:这表明脚本是 JavaScript. HTML5 规范敦促作者省略该属性,而不是提供多余的 MIME 类型.在早期的浏览器中,这标识 ...
【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能自动生成HTML ...
php 表单提交文件大小,PHP如何通过表单直接提交大文件详解
PHP如何通过表单直接提交大文件详解前言我想通过表单直接提交大文件,django 那边我就是这么干的.而对于 php 来说,我认为尽管可以设置最大上传的大小,但最大也无法超过内存大小,因为它无法把 ...
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
form表单HTML5.CSS3标签及属性.属性值 form表单HTML标签.属性.属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) ...
php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
前端CSS input type属性详解
input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个. 1.首先是最常用的 text <input type="text" placeh ...
HTML 表单（form）使用详解
一.表单 1.表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 2.表单的工作机制 3.表单定义(<form>< ...

表单input标签type属性详解

表单input标签type属性详解相关推荐

最新文章

热门文章