***value属性
value属性规定输入字段的初始值。
比如在文本框的格式中,定义的value属性可以预选在文本框中
ex:
first name:</br>
<input type="text" name="firstname" value="john">
则在文本框中,John会先显示在文本框中,当然,这是可以改的,value的值本来
就是依据文本框中的内容。
***readonly 属性
规定了输入的字段仅为只读,不能修改。
ex:
<input type="text" name="firstname" value="john" readonly>
则此时文本框内不仅显示John,且不能修改。
***disabled属性
disabled属性规定输入的字段是禁用的,被禁用的元素将不可点击不可用
被禁用的元素不会被提交。
ex:<input type="text" name="firstname" vlaue="john" disabled>
则该内容不可用,当然也不会被提交。浏览器会将其显示为灰色的框框。
***size属性
其规定了输入字段的尺寸,以字符计算。
<input type="text" name="firstname" value="john" size="40">
则这个框框内最多仅能输入40个字符。其是以框框的大小来限制的,一般
框框的大小能容下20个字符。而这与maxlength 属性卜一祥,其是用硬性来限定
的,而与框框的大小无关。
***maxlength属性
规定了允许输入字段的最大长度。
<input type ="text" name="firstname" maxlength="10">
***list属性
list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
其是根据datalist的ID来选择用哪个datalist 来填充list的选项
<input list="browsers">
<datalist id="browsers">
<option value="ie">
<option value="firefox">
<option value="chrome">
</datalist>
则显示的文本框还是那个“20”字符的文本框,只是仅能输入10个字符,当输入
10个字符后,就不能再输入了。
以下是HTML5的属性:
***自动填写功能
autocomplete属性
当自动完成开启,浏览器会基于用户之前的输入值自动填写值。
可以把表单的 autocomplete 设置为 on,同时把特定的输入字段设置为 off,反之亦然。
ex:
<form action="" autocomplete="on">
first name:<input type="text" name="fname"></br>
last name:<input type="text" name="lname"></br>
e-mail:<input type="email" name="email" autocomplete="off"></br>
注意到,这里的first name和last name的是开启的,而e-mail的是关闭的。
***novalidate 属性
其属于<form>属性
可以在表单提交时不进行验证,比如emali 会自动进行验证,而在<form>的属性中
添加novalidate ,就不会进行验证,你打什么均会被提交给服务器。
$注意:这是<form>的属性。但要对一个form中的一个验证另一个不进行验证的化,就
要用formnovalidate属性。
ex:
<form action="php">
e-mail:<input type="email" name="userid"></br>
<input type="submit" value="Submit"></br>
<input type="submit" formnovalidate value="Submit without validation">
则一个验证,另一个不验证。
#
ormnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formnovalidate 属性可用于 type="submit"。
***自动聚焦
autofocus属性,可以自动
ex:
first name:<input type ="text" name="fname" autofocus>
***formaction
可以对一件事件进行两件处理,用于有两个按钮或以上。
<form action="php">
first name:<input type="text" name="fname"></br>
last name:<input type="text" name="lname"></br>
<input type="submit" value="Submit"></br>
<input type="submit" formaction="php2" value="SubmIT as admin">
则按下Submit按钮,执行PHP。而按下submit as admin ,执行PHP2.
***表单提交到新的窗口
formtarget属性
formtarget 属性会覆盖 <form> 元素的 target 属性。
formtarget 属性可与 type="submit" 和 type="image" 使用。
如把上面的第二个提交改为:
<input type="submit" formtarget="_blank" value="Submit to a new window">
***height和width属性
height 和 width 属性仅用于 <input type="image">。
注释:请始终规定图像的尺寸。如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁。
ex: 如把图像定义为提交按钮
<input type="image" src="url" alt="Submit" width="48" height="48">
***pattern属性
pattern 属性规定用于检查 <input> 元素值的正则表达式。
pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。
Country code:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
用title属性来提示用户。
***预显示在框中
placeholder属性
placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。
ex:
<input type="search" name="search" placeholder="search csdn">
***required属性
如果设置,则规定在提交表单之前必须填写输入字段。
ex:
<input type="text" name="username" required>
可以和之前的number一起用,这样就可以排除用户不输入的情况了。
当用户没有输入任何东西时,会提示,请输入该字段。
***step属性
合理的间距,可以和max min 属性一起用。