跳到主要内容

输入控件

单行文本控件​

input 标签​

通用属性值​

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" />

多行文本控件​

textarea 标签​

  • 多行文本控件;
  • 默认值放置于 opening 和 closing tags 之间;
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

resize 属性​

  • 通过 css 中的 resize 属性;
  • 控制其是否可以调整大小;

属性​

cols/rows​
  • 设置行/列可见字符数量;
  • 正整数, 默认为 20;
  • 可通过拉伸修改;
wrap​
  • soft;
    • 默认值;
    • 浏览器渲染换行;
    • 服务器提交不换行;
  • hard: 浏览器渲染和服务器都换行;
  • off: 浏览器渲染和服务器都不换行;

数字控件​

通用属性​

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;
    • 构建自定义按钮;