跳到主要内容

文本类输入控件

input 元素靠哪些属性定义自身行为？​

属性作用
type控件类型, 决定形态与校验
name提交时的字段名
id供 label 的 for 关联
value初始值, 也是提交值
<input type="text" id="comment" name="comment" value="I'm a text field" />

单行文本类型分别有什么行为？​

type行为
text任意单行文本
password输入内容以圆点显示
hidden用户不可见, 随表单提交
email限制为有效的邮箱地址
search搜索栏
tel限制为有效的电话号码
url限制为有效的 URL
<input type="email" id="email" name="email" />
<input type="search" id="search" name="search" />
<input type="tel" id="tel" name="tel" />
<input type="url" id="url" name="url" />

password 与 hidden 真的隐藏数据吗？​

  • password: 只是用户不可见, 提交的值本身不加密;
  • hidden: 只是不渲染, 值在页面源码中可见;
  • 结论: 两者都不提供保密性;
<input type="password" id="pwd" name="pwd" />
<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

textarea 元素如何使用？​

  • 语义: 多行文本控件;
  • 默认值: 写在开闭标签之间, 而不是 value 属性;
  • 尺寸: rows 行数、cols 列数;
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

textarea 的大小能否调整？​

  • 默认: 允许拖动改变大小;
  • 控制: 用 CSS 的 resize 属性开关或限定方向;
textarea {
  resize: vertical;
}