html输入的数据,HTML数据输入input

前面我们讲了HTML的展示，而在网页中，我们经常会遇到数据输入，如登录注册，填写报名表，完善个人信息，发布动态等等，都需要获取用户输入数据。

用户输入的数据有多种类型， 有纯文本，密码，单项选择，多项选择，下拉选择，文件等等，接下来我们一个一个来看。

input－文本输入type:定义输入类型，代表文本输入

name：定义该输入项名称，以便后续通过javascript 或者php获取输入的值

placeholder：当输入内容为空时的提示语

value：输入框值

maxlength：输入值最大长度

展示效果如下：

input－密码输入代表密码输入

password 字段中的字符会被做掩码处理(显示为星号或实心圆)，以免被人偷窥～～

展示效果如下：

input－单选框代表单选输入

一个网页中可能存在多个单选，如选择性别，选择星座，name相同的单选为同一组

可以通过checked 或 checked="true"，设置默认选中的项

我们真正得到的值是value，后面的文字部分“男孩”，“女孩”只是给用户看的男孩

女孩

展示效果如下：

男孩女孩

input－复选框代表复选输入

一组复选框name相同篮球

足球

游泳

展示效果如下：

篮球足球游泳

input－颜色选择代表颜色选择

input－日期选择代表日期选择

展示效果如下：

input－邮箱email代表输入值必须是邮箱

是指表单，后面会详细介绍，一个表单可以包含多个输入项

点击后可提交表单内容

如果输入数据不满足邮箱格式(必须包含@)则会提示

展示效果如下：

input－数字number代表输入值必须是数字

可以设置允许输入的最小值和最大值

如果输入值不符合要求，点击提交会有错误提示

展示效果如下：

这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的)，可以自行实践：属性描述

disabled规定输入字段应该被禁用。

max规定输入字段的最大值。

maxlength规定输入字段的最大字符数。

min规定输入字段的最小值。

pattern规定通过其检查输入值的正则表达式。

readonly规定输入字段为只读(无法修改)。

required规定输入字段是必需的(必需填写)。

size规定输入字段的宽度(以字符计)。

step规定输入字段的合法数字间隔。

value规定输入字段的默认值。

input－滑块range代表一个滑块控件

可以设置滑动最小值，最大值，每次滑动的步阶

展示效果如下：

更多input输入类型如下，可以自行尝试

值描述

button定义可点击的按钮(大多与 JavaScript 使用来启动脚本)

checkbox定义复选框。

color定义拾色器。

date定义日期字段(带有 calendar 控件)

datetime定义日期字段(带有 calendar 和 time 控件)

datetime-local定义日期字段(带有 calendar 和 time 控件)

month定义日期字段的月(带有 calendar 控件)

week定义日期字段的周(带有 calendar 控件)

time定义日期字段的时、分、秒(带有 time 控件)

email定义用于 e-mail 地址的文本字段

file定义输入字段和 "浏览..." 按钮，供文件上传

hidden定义隐藏输入字段

image定义图像作为提交按钮

number定义带有 spinner 控件的数字字段

password定义密码字段。字段中的字符会被遮蔽。

radio定义单选按钮。

range定义带有 slider 控件的数字字段。

reset定义重置按钮。重置按钮会将所有表单字段重置为初始值。

search定义用于搜索的文本字段。

submit定义提交按钮。提交按钮向服务器发送数据。

tel定义用于电话号码的文本字段。

text默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。

url定义用于 URL 的文本字段。