跳到主要内容

输入控件

单行文本控件​

input 标签​

特殊类型​

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

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 属性;
  • 控制其是否可以调整大小;

数字控件​

number 属性值​

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

range 属性值​

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

可选控件​

checkbox​

  • 具有相同 name 属性值的选项视为同一组;
  • 只有选中选中的 value 被发送;
  • 如果选中项没有值, 发送 on;
  • 若无选中项, 控件视为未知状态, 不发送任何值;

radio 属性值​

  • 在 checkbox 控件基础之上;
  • 除非重置表单, 一旦选中项, 就无法消除;

时间控件​

datetime-local 属性值​

  • 显示和选择本地时间;

month 属性值​

  • 显示和选择年-月;

time 属性值​

  • 显示和选择时-分;

week 属性值​

  • 显示和选择年-周;

date 属性值​

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

其他​

color 属性值​

  • 返回小写十六进制格式;

  • 提供一个颜色选择器控件;

image 属性值​

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

file 属性值​

  • 发送文件至服务器;

按钮控件​

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