是什么

<input>用于接收用户的输入。没有<input>用户就没法输入数据，登录注册什么的都不能做，复杂的表单就别想了。

type属性

<input>的类型比较多，每一种侧重于不同的数据类型和结构：

  • <input type="text"> 默认值（可以不填type属性），用于输入文字，如用户名，昵称等等。
  • <input type="password"> 密码输入，我们平时输密码时的小黑点就是这么来的。
  • <input type="radio"> 单选框，在需要用到单选但选项少的情况下使用。如性别（只有两个选项）。
  • <input type="checkbox"> 多选框（复选框），在需要用到多选但选项少时使用，多选，但是选项少的情况下使用。如性取向˙Ꙫ˙ 。
  • <input type="file"> 选择文件，上传文件必用。
  • <input type="reset"> 重置表单。
  • <input type="hidden" value="秘密"> 隐形输入框，一般用于在表单提交时回传重要的令牌（就是一串自产自销的无序字符）来验证用户是真的或状态是对的。
  • <input type="button" value="点我"> 按钮，不推荐，正常情况下使用<button>即可，因为<button>可以包含子元素，而<input>不行，灵活度的问题。

举例：

<input type="text">
结果
HTML
运行
整页预览 
<input type="text" value="我是text类型">
<input type="password">
结果
HTML
运行
整页预览 
<input type="password" placeholder="我是password类型">
<label>
  <input type="radio" name="sex" value="male">
  男
</label>
<label>
  <input type="radio" name="sex" value="female">
  女
</label>
结果
HTML
运行
整页预览 
<p>请选择你的性别<p>
<label>
  <input type="radio" name="sex" value="male">
  男
</label>
<label>
  <input type="radio" name="sex" value="female">
  女
</label>
<p>请选择你的性取向<p>
<label>
  <input type="checkbox" name="sex" value="male">
  男
</label>
<label>
  <input type="checkbox" name="sex" value="female">
  女
</label>
结果
HTML
运行
整页预览 
<p>请选择你的性取向<p>
<label>
  <input type="checkbox" name="sex" value="male">
  男
</label>
<label>
  <input type="checkbox" name="sex" value="female">
  女
</label>
<p>请选择文件<p>
<input type="file" name="avatar">
结果
HTML
运行
整页预览 
<p>请选择文件<p>
<input type="file" name="avatar">
<form>
  姓名：<input>
  <br>
  年龄：<input>
  <input type="reset" value="点我重置">
</form>
结果
HTML
运行
整页预览 
<form>
  姓名：<input>
  <br>
  年龄：<input>
  <input type="reset" value="点我重置">
</form>
登录后评论