跳到主要内容

输入控件

input 标签​

语法格式​

  • 为表单创建交互式控件；
<label for="name">Name:</label>
<input type="text" id="name" name="name" required size="10" />

属性​

type​
  • 定义 input 标签样式和行为；
  • 默认值为 text；
  • 推荐总是使用；

文本控件​

示意图​

通用属性值​

placeholder​
  • 简要描述 input 输入信息的类型；
  • 最好是一个示例；
size​
  • 设置显示文本内容数量；
maxlength​
  • 设置控件输入内容最大字符数；
minlength​
  • 设置控件输入内容最小字符数；
pattern​
  • 自定义输入数据格式；

text 属性值​

  • 单行文本；
  • 如果输入文本具有换行符；
  • 发送至服务器时，自动删除；
<input type="text" id="comment" name="comment" value="I'm a text field" />

password 属性值​

  • 密码形式，仅是用户不可见；
<input type="password" id="pwd" name="pwd" />

hidden 属性值​

  • 隐藏文本形式，仅是用户不可见；
<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

email 属性值​

语法格式​
  • 限制输入数据格式为有效的邮箱地址；
<input type="email" id="email" name="email" />
multiple 属性​
  • 布尔属性；
  • 设置一次输入多个邮箱地址；
  • ，分隔；

search 属性值​

  • 搜索栏；
<input type="search" id="search" name="search" />

tel 属性值​

  • 限制输入数据格式为有效的电话号码；
<input type="tel" id="tel" name="tel" />

url 属性值​

  • 限制输入数据格式为有效的 URL ；
<input type="url" id="url" name="url" />

数字控件​

通用属性​

min​
  • 设置允许最小值；
max​
  • 设置允许最大值；
step​
  • int；
    • 数字变化值，默认变化值为 1；
  • any；
    • 暗示无指定 step；
    • 对 float 有效；

number 属性值​

  • 限制输入数据格式为有效的 Number ；

range 属性值​

  • 创建一个滑动器选择数字；
  • 配合 output 标签用于显示当前值；
视觉反馈

可选控件​

checkbox 属性值​

示意图​
机制​
  • 具有相同 name 属性值的选项视为同一组；
  • 只有选中选中的 value 被发送；
  • 如果选中项没有值，发送 on；
  • 若无选中项，控件视为未知状态，不发送任何值；
风格规范​
  • 包裹在 li 标签中；
  • 使用 fieldset 和 legend 标签；
  • label 标签一一对应；
<fieldset>
  <legend>Choose all the vegetables you like to eat</legend>
  <ul>
    <li>
      <label for="carrots">Carrots</label>
      <input
        type="checkbox"
        id="carrots"
        name="vegetable"
        value="carrots"
        checked
      />
    </li>
    <li>
      <label for="peas">Peas</label>
      <input type="checkbox" id="peas" name="vegetable" value="peas" />
    </li>
    <li>
      <label for="cabbage">Cabbage</label>
      <input type="checkbox" id="cabbage" name="vegetable" value="cabbage" />
    </li>
  </ul>
</fieldset>
checked 属性​
  • 布尔属性；
  • 决定复选框是否默认选中；

radio 属性值​

示意图​
  • 单选框；
机制​
  • 在 checkbox 控件基础之上；
  • 除非重置表单，一旦选中项，就无法消除；
风格规范​
  • 同 checkbook 控件；
属性​
  • 同 checkbox 控件；

时间控件​

时间属性值​
  • 同 time 标签；

通用属性​

min​
  • 设置允许最小值；
max​
  • 设置允许最大值；
step​
  • 日期变化值；
  • 默认值为日期对应单位；

datetime-local 属性值​

  • 显示和选择本地时间；

month 属性值​

  • 显示和选择年-月；

time 属性值​

  • 显示和选择时-分；

week 属性值​

  • 显示和选择年-周；

date 属性值​

  • 显示和选择年-月-日；

其他​

color 属性值​

示意图​
  • 提供一个颜色选择器控件；
机制​
  • 返回小写十六进制格式；

image 属性值​

  • 像 img 标签一样渲染按钮；

file 属性值​

示意图​
  • 发送文件至服务器；

属性值​

accept​
  • 规定发送文件格式；
  • 推荐总是使用；
multiple​
  • 布尔属性；
  • 决定是否可以发送多个文件；

按钮控件​

示意图​

属性值​

type​
  • submit；
    • 默认值；
    • 根据 form 标签中的 action 属性发送数据；
  • reset；
    • 重置所有表单控件为默认值；
    • 不推荐使用；
  • button；
    • 构建自定义按钮；