前端开发学习笔记–HTML 表单元素(续)

发布于 2018-04-03  239 次阅读


<input >元素可以用来生成一个供用户输入数据的简单文本框,其中<input>元素中的<type>属性的不同属性值都讲显示不同的输写框,以下是部分<type>属性的属性值的说明

属性名称 说明
text 一个单行文本框,默认
search 搜索框,一些浏览器键入内容会出现×取消
submit 生成一个提交按钮
reset 生成一个重置按钮
button 生成一个普通按钮
number 只能输入数值的框
range 只能输入在一个数值范围的框
checkbox 复选框,用户勾选框
radio 单选框,只能选一个
image 生成一个图片按钮
color 生成一个颜色代码按钮
password 隐藏字符的密码框
file 生成一个上传控件
hidden 生成一个隐藏控件
date/month/time/week/datetime 获取时间和日期
url 生成一个网址的文本框
email 生成一个检测电子邮件的文本框
tel 生成一个检测电话号码的文本边框

析:

①<input type="text">,呈现的是一个输入任意字符的文本框,其附加一些属性如下:

<input type="text" maxlength="33">
//设置文本框输入字符长度

<input type="text" value="初始值">
//设置文本框的初始值

<input type="text" size="200">
//设置文本框长度

<input type="text" placeholder="请输入内容">
//设置文本框输入提示

<input type="text" readonly>
//设置文本框内容为只读,可以提交数据

<input type="text" disabled>
//设置文本框内容不可用,不可以提交数据

<input list="sportlist">
<datalist id="sportlist">
<option value="足球">足球</option>
<option value="篮球">篮球</option>
<option value="排球" label="排球">
<option value="台球">
</datalist>
//设置文本提供的建议值

②<input type="search">,会显示一个叉来取消搜索内容。额外属性与 text 一致。

③<input type="submit">/<input type="reset">/<input type="button">生成一个提交按钮/重置按钮/一般按钮。

④<input type="number">/<input type="range">只限输入数字的文本框/生成一个数值范围文本框,样式是拖动式,其附加属性如下:

<input type="number" step="3">
//指定上下调节值的步长

<input type="number"  min="10">
//设置可接受的最小值

<input type="number"  max="100">
//设置可接受的最大值

<input type="number" value="初始值">
//设置指定初始值

<input type="number" readonly>
//设置文本框内容只读

<input type="number" required>
//设置用户必须输入一个值,否则无法通过输入验证

<input list="sportlist">
<datalist id="sportlist">
<option value="足球">足球</option>
<option value="篮球">篮球</option>
<option value="排球" label="排球">
<option value="台球">
</datalist>
//指定为文本框提供建议值的 datalist 元素, 其值为 datalist 元素的 id 值

⑤<input type="checkbox" name="sport" checked value="1">/<input type="radio" name="sport" checked value="1">生成一个获取布尔值的复选框或固定选项的单选框,其附加属性如下:

<input type="checkbox" name="sport" checked value="1">
//设置 value 值,即设置复选框、单选框勾选状态时提交的数据,默认是 on

<input type="checkbox" name="sport" checked>
//设置复选框、单选框是否为勾选状态

<input type="checkbox" name="sport" required>
//表示用户必须勾选,否则无法通过验证

⑥<input type="image" src="img.png">,生成一个图片按钮,点击图片就实现提交功能,并且传送了分区响应数据,图片按钮的其他附加属性如下:

属性名称 说明
src 指定要显示图像的 URL
alt 提供图片的文字说明
width 图像的长度
height 图像的高度

⑦<input type="color">,实现文本框获取颜色的功能,显示一个颜色对话框提供选择。

⑧<input type="password">,一般用于密码框的输入,所有的字符都会显示星号,其附加属性如下:

属性名称 说明
value 设置密码框初始值
size 设置密码框宽度
required 表明用户必须输入同一个值
disabled 文本框处于禁用状态
maxlength 设置密码框最大字符长度
pattern 用于输入验证的正则表达式
placeholder 输入密码的提示
readonly 密码框处于只读状态

⑨<input type="file">,生成一个文件上传控件,用于文件的上传,其额外属性 accept 表指定接受的 MIME 类型,如 accept="image/gif, image/jpeg, image/png";required 表用户必须提供一个值以通过验证。

⑩<input type="hidden">,生成一个隐藏控件,一般用于表单提交时关联主键 ID 提交。

⑪<input type="date">等,实现文本框可以获取日期和时间的值,附加属性和 number 一致。

⑫<input type="url">,网址格式,附加属性和 text 一致。

⑬<input type="email">,电子邮件格式,附加属性和 text 一致。

⑭<input type="tel">,电话格式,附加属性和 text 一致。