表单的基本元素-文本框

表单的基本元素-文本框

表单的基本元素是指能够让用户在表单中输入信息的元素，比如常见的文本框、密码框、下拉框、单选框和复选框等。下面逐一介绍，本节先讨论文本框。

单行文本输入框 text

文本框是一种让访问者自行填写内容的表单对象，通常用来填写一些比较短的文字内容，比如用户名、邮箱地址等。

<input type="text" name="" value="" maxlength="" size=""/>

input 标签通过配置不同的 type 值，可以实现不同的表单元素。比如 type="text" 是单行文本框，type="submit" 是提交按钮，type="password" 是密码框。

<input type="text" name="name"/><br/><br/>
<input type="password" name="password"/><br/><br/>
<input type="submit" value="登录"/>

type="text" 表示单行文本框。HTML5 还拥有多个新的表单输入类型，提供了更好的输入控制和验证，不过并不是所有浏览器都支持这些属性。

<input type="text" name="name" value="默认值" maxlength="6" size="32"/><br/><br/>

上面示例表示：最多输入6个字符，文本框宽度是32个字符宽度，默认打开显示”默认值”三个字。

HTML5 新增的 input 框类型

<input type="email" name="user_email" />
<input type="url" name="user_url" />
<input type="number" name="points" min="1" max="10" />
<input type="range" name="points" min="1" max="10" />

日期选择：

<input type="date" name="user_date" />

HTML5 的目的是减少对第三方插件的依赖，增加了很多新特性。比如视频播放直接用 <video> 标记实现，不需要 Flash；日期选择也只需一个 input 表单即可，不需要 js/jquery 插件支持。

属性说明

• name：定义文本框名称，在整个表单中必须唯一，服务器端靠此名称获取数据
• size：文本框宽度，单位是字符宽度
• maxlength：最多输入的字符数
• value：初始值