HTML表单2-input属性

***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 属性一起用。

猜你喜欢

转载自blog.csdn.net/weixin_41060905/article/details/81109621
今日推荐