一篇拿下<input>元素
博主有话说:如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。
个人主页:GUIDM主页
内容专栏:干货
此块内容为纯纯的干货,略显乏味枯燥,是笔记向的blog。如果觉得还不错,希望你可以一键三连,一整个大感谢。
input必须得给它拿捏得死死的。
Input元素用于搜集用户信息,它的属性真的非常之多,笔记都写了好几页。在get元素之前,先来为
- 此标签为input元素定义标记,label元素不会向用户呈现任何特殊效果,当用户选择此便签时,浏览器会自动将焦点转到标签相关的表单控件上。
- label标签的for属性应当与相关元素的id属性相同。
属性:
(1)for属性:规定label与哪个表单元素绑定。
- 显式形式:
- 隐式形式:将表单控件为标记标签的内容。
(2)form属性:规定label所属的一个或多个表单。
form属性值必须是其所属的表单的id,若引用一个以上的表单,请使用空格分隔的列表。
……
你们的魔鬼来咯。321
元素的属性
1、accept属性 (只能与配合使用)
该属性规定能够通过文件上传进行提交的文件类型。(避免使用此属性,应该在服务器端验证文件上传。)
16、max/min属性
该属性规定输入字段所允许的最大值/最小值,配合使用可创建取值范围。
属性值 | 描述 |
number | 数字值。 |
date | 日期。 |
17、maxlength属性(与或配合使用)
该属性规定输入字段的最大值及字符个数计。
18、multiple属性 (适用于和)
该属性规定输入字段可选择多个值。
19、name属性:
该属性规定input元素的名称,用于对提交服务器后的表单数据进行标识,只有设置了name属性的表单元素才能在提交表单时传递它们的值。
20、pattern属性:
该属性规定用于验证输入字段的模式(正则表达式)。
21、placeholder属性:
该属性提供可描述字段预期值的提示信息,该提示会在输入字段为空时显示,输入信息后则会消失。
22、readonly属性(适用于和)
该属性规定输入字段为只读,只读字段不能修改。
用户可以使用tab键切换到该字段,还可以选中或拷贝文本。
23、required属性:
该属性必需在提交之前填写输入字段,若使用该属性,则字段是必填(或必须)的。
24、size属性:
该属性定义输入字段的宽度。
对于和size属性定义可见的字符数,而对于其他类型,size属性定义的是以像素为单位的输入字段宽度。
在这里推荐使用CSS来代替:
25、src属性(只能与配合并同时使用)
该属性规定作为提交按钮显示的图像的URL。
属性值 | 描述 |
post | 以HTTP post事务的形式发生表单数据。 |
get | 以URL追加表单数据: URL?name=value&name=value |
26、step属性:
规定输入字段的合法数字间隔,可以与max以及min属性配合使用。
27、type属性
属性值 | 描述 |
button | 定义可点击按钮 |
checkbox |
定义复选框 |
file | 定义输入字段和浏览按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义图像形式的提交按钮 |
radio | 定义密码字段,该字段中的字符被掩码 |
reset | 定义单选按钮 |
submit | 定义重置按钮 |
text | 定义单行的输入字段,用户可以其中输入文本,默认20个字符 |
28、value属性:
为input元素设定值。
- type=“bottom”,“reset”,“submit”——定义按钮上的显示文本。
- type=“text”,“password”,“hidden”——定义输入字段的初始值。
- type=“checkbox”,“radio”,“image”——定义与输入相关联的值。
- 无法与type=“file”一同使用。