HTML数据输入input

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

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

input－文本输入

• type:定义输入类型，<input type="text" >代表文本输入

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

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

• value：输入框值

• maxlength：输入值最大长度

  
  

<input type="text" name="username" placeholder="请输入用户名" value="珊瑚学院" maxlength="10">

展示效果如下：

input－密码输入

• <input type="password" >代表密码输入

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

<input type="password" name="password" placeholder="请输入密码" maxlength="30" >

展示效果如下：

input－单选框

• <input type="radio" >代表单选输入

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

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

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

<input type="radio" name="sex" value="boy">男孩
<input type="radio" name="sex" value="girl" checked>女孩

展示效果如下：

男孩女孩

input－复选框

• <input type="checkbox" >代表复选输入

• 一组复选框name相同
  

<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="swim">游泳

展示效果如下：

篮球足球游泳

input－颜色选择

• <input type="color" >代表颜色选择

<input type="color">

input－日期选择

• <input type="date" >代表日期选择

<input type="date" name="date">

展示效果如下：

input－邮箱email

• <input type="email" >代表输入值必须是邮箱

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

• <input type="submit">点击后可提交表单内容

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

  
  

<form>
    <input type="email" name="tel">
    <input type="submit">
</form>

input－数字number

• <input type="email" >代表输入值必须是数字

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

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

  
  

<form>
    <input type="number" min="5" max="10">
    <input type="submit">
</form>

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的），可以自行实践：

input－滑块range

• <input type="range" >代表一个滑块控件

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

<input type="range" min="5" max="30" step="5">

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