网站集成微信登陆,渭南市住建设局网站,深圳人才招聘网官网,微信推广平台自己可以做文章目录 HTML 输入属性value 属性readonly 属性disabled 属性size 属性maxlength 属性min 和 max 属性multiple 属性pattern 属性placeholder 属性required 属性step 属性autofocus 属性height 和 width 属性list 属性autocomplete 属性总结 HTML 输入属性
本章介绍 HTML input 元素的不同属性。
value 属性
input value 属性指定输入字段的初始值
示例 具有初始默认值的输入字段
form
label forfnameFirst name:/labelbr
input typetext idfname namefname valueJohnbr
label forlnameLast name:/labelbr
input typetext idlname namelname valueDoe
/formreadonly 属性
input readonly 属性指定输入字段是只读的。
只读输入字段无法修改但是用户可以选中它、突出显示它并从中复制文本。
提交表单时将发送只读输入字段的值
示例 只读输入字段
form
label forfnameFirst name:/labelbr
input typetext idfname namefname valueJohn readonlybr
label forlnameLast name:/labelbr
input typetext idlname namelname valueDoe
/formdisabled 属性
input disabled 属性指定应禁用输入字段。
禁用的输入字段不可用且不可点击。
提交表单时不会发送禁用输入字段的值
示例 禁用的输入字段
form
label forfnameFirst name:/labelbr
input typetext idfname namefname valueJohn disabledbr
label forlnameLast name:/labelbr
input typetext idlname namelname valueDoe
/formsize 属性
输入 size 属性指定输入字段的可见宽度以字符为单位。
size 的默认值为 20。
注意size 属性适用于以下输入类型文本、搜索、电话、网址、电子邮件和密码。
示例 设置输入字段的宽度
form
label forfnameFirst name:/labelbr
input typetext idfname namefname size50br
label forpinPIN:/labelbr
input typetext idpin namepin size4
/formmaxlength 属性
input maxlength 属性指定输入字段中允许的最大字符数。
注意设置 maxlength 后输入字段将不会接受超过指定数量的字符。但是此属性不提供任何反馈。因此如果您想提醒用户您必须编写 JavaScript 代码。
示例 设置输入字段的最大长度
form
label forfnameFirst name:/labelbr
input typetext idfname namefname size50br
label forpinPIN:/labelbr
input typetext idpin namepin maxlength4 size4
/formmin 和 max 属性
输入 min 和 max 属性指定输入字段的最小值和最大值。
min 和 max 属性适用于以下输入类型number、range、date、datetime-local、month、time 和 week。
提示结合使用 max 和 min 属性可创建合法值范围。
示例 设置最大日期、最小日期和合法值范围
form
label fordatemax输入 1980-01-01 之前的日期/label
input typedate iddatemax namedatemax max1979-12-31brbrlabel fordatemin输入 2000-01-01 之后的日期/label
input typedate iddatemin namedatemin min2000-01-02brbrlabel forquantity数量介于 1 和 5 之间/label
input typenumber idquantity namequantity min1 max5
/formmultiple 属性
input multiple 属性指定允许用户在输入字段中输入多个值。
multiple 属性适用于以下输入类型电子邮件和文件。
示例 接受多个值的文件上传字段
form
label forfiles选择文件/label
input typefile idfiles namefiles multiple
/formpattern 属性
输入 pattern 属性指定在提交表单时检查输入字段值的正则表达式。
pattern 属性适用于以下输入类型文本、日期、搜索、url、电话、电子邮件和密码。
提示使用全局 title 属性描述模式以帮助用户。
提示在我们的 JavaScript 教程中了解有关正则表达式的更多信息。
示例 只能包含三个字母无数字或特殊字符的输入字段
form
label forcountry_code国家代码/label
input typetext idcountry_code namecountry_code
pattern[A-Za-z]{3} title三个字母的国家代码
/formplaceholder 属性
输入占位符属性指定一个简短提示用于描述输入字段的预期值示例值或预期格式的简短描述。
在用户输入值之前简短提示会显示在输入字段中。
placeholder 属性适用于以下输入类型文本、搜索、网址、号码、电话、电子邮件和密码。
示例 带有占位符文本的输入字段
form
label forphone输入电话号码/label
input typetel idphone namephone
placeholder123-45-678
pattern[0-9]{3}-[0-9]{2}-[0-9]{3}
/formrequired 属性
input required 属性指定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型文本、搜索、网址、电话、电子邮件、密码、日期选择器、数字、复选框、单选按钮和文件。
示例 必填输入字段
form
label forusername用户名/label
input typetext idusername nameusername required
/formstep 属性
input step 属性指定输入字段的合法数字间隔。
例如如果 step“3”合法数字可以是 -3、0、3、6 等。
提示此属性可以与 max 和 min 属性一起使用以创建合法值的范围。
step 属性适用于以下输入类型number、range、date、datetime-local、month、time 和 week。
示例 具有指定合法数字间隔的输入字段
form
label forpointsPoints:/label
input typenumber idpoints namepoints step3
/form注意输入限制并非万无一失JavaScript 提供了许多添加非法输入的方法。要安全地限制输入还必须由接收方服务器检查
autofocus 属性
input autofocus 属性指定输入字段应在页面加载时自动获得焦点。
示例 让“First name”输入字段在页面加载时自动获得焦点
form
label forfnameFirst name:/labelbr
input typetext idfname namefname autofocusbr
label forlnameLast name:/labelbr
input typetext idlname namelname
/formheight 和 width 属性
输入 height 和 width 属性指定 input typeimage 元素的高度和宽度。
提示始终为图像指定 height 和 width 属性。如果设置了 height 和 width则在页面加载时会保留图像所需的空间。如果没有这些属性浏览器就不知道图像的大小也无法为其保留适当的空间。效果是页面布局将在加载过程中发生变化图像加载时。
示例 将图像定义为提交按钮并带有高度和宽度属性
form
label forfnameFirst name:/label
input typetext idfname namefnamebrbr
label forlnameLast name:/label
input typetext idlname namelnamebrbr
input typeimage srcimg_submit.gif altSubmit width48 height48
/formlist 属性
输入列表属性指的是包含 input 元素的预定义选项的 datalist 元素。
示例 datalist 中具有预定义值的 input 元素
form
input listbrowsers
datalist idbrowsers
option valueEdge
option valueFirefox
option valueChrome
option valueOpera
option valueSafari
/datalist
/formautocomplete 属性
input autocomplete 属性指定表单或输入字段是否应打开或关闭自动完成功能。
自动完成功能允许浏览器预测值。当用户开始在字段中输入时浏览器应根据先前输入的值显示用于填写字段的选项。
autocomplete 属性适用于 form 和以下 input 类型text、search、url、tel、email、password、datepickers、range 和 color。
示例 一个 HTML 表单其中有一个输入字段的自动完成功能已打开另一个已关闭
form action/action_page.php autocompleteon
label forfnameFirst name:/label
input typetext idfname namefnamebrbr
label forlnameLast name:/label
input typetext idlname namelnamebrbr
label foremailEmail:/label
input typeemail idemail nameemail autocompleteoffbrbr
input typesubmit valueSubmit
/form提示在某些浏览器中您可能需要激活自动完成功能才能使其工作查看浏览器菜单中的“首选项”。 总结
本文介绍了的html表单的input属性如有问题欢迎私信和评论
