input标签主要用于Web表单的创建交互,以便接受来自用户的数据。 我们通过更改type属性的值,来实现不同的输入类型。在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们可以把它们写在页面上的任何一个地方,只需要给该元素增加一个form属性,form属性的值为form表单的id。例如:
<form method="get" id="test">
<input type="text" name="name"/>
<input type="password" name="password"/>
<input type="submit" value="提交">
</form>
<input type="text" name="confirm" form="test">
color:用于指定颜色的控件。
date:用于输入日期的控件(年,月,日,不包括时间)。
datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分)。
datetime-local:用于输入日期时间控件,不包含时区。
email:用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid css 伪类。
month:用于输入年月的控件,不带时区。
number: 用于输入浮点数的控件。
range:用于输入不精确值控件。如果未指定相应的属性,控件使用如下缺省值: min:0 max:100 value:min + (max-min)/2,或当 max 小于 min 时使用。
search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel:用于输入电话号码的控件;换行会被自动从输入的值中移除A,但不会执行其他语法。可以使用属性,比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候,可以应用 :valid 和 :invalid css 伪类。
time:用于输入不含时区的时间控件。
url:用于编辑URL的字段。换行会被自动从输入值中移队。可以使用如:pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
week:用于输入一个由星期-年组成的日期,日期不包括时区。
使用上述属性的时候,当在表单提交,和触发填写时候,支持html5的浏览器会提示类型是否正确,如果没有设置novalidate属性当输入不正确是无法提交的。不支持的将以默认属性"text"。
autocomplete: 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。<form autocomplete="on|off">
novalidate :属性规定当提交表单时不对其进行验证。如果使用该属性,则表单不会验证表单的输入。<form novalidate="novalidate">
属性 | 值 | 描述 |
---|---|---|
accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
align |
| 不赞成使用。规定图像输入的对齐方式。 |
alt | text | 定义图像输入的替代文本。 |
autocomplete |
| 规定是否使用输入字段的自动完成功能。 |
autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。 (不适用于 type="hidden") |
checked | checked | 规定此 input 元素首次加载时应当被选中。 |
disabled | disabled | 当 input 元素加载时禁用此元素。 |
form | formname | 规定输入字段所属的一个或多个表单。 |
formaction | URL | 覆盖表单的 action 属性。 (适用于 type="submit" 和 type="image") |
formenctype | 见注释 | 覆盖表单的 enctype 属性。 (适用于 type="submit" 和 type="image") |
formmethod |
| 覆盖表单的 method 属性。 (适用于 type="submit" 和 type="image") |
formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性。 如果使用该属性,则提交表单时不进行验证。 |
formtarget |
| 覆盖表单的 target 属性。 (适用于 type="submit" 和 type="image") |
height |
| 定义 input 字段的高度。(适用于 type="image") |
list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
max |
| 规定输入字段的最大值。 请与 "min" 属性配合使用,来创建合法值的范围。 |
maxlength | number | 规定输入字段中的字符的最大长度。 |
min |
| 规定输入字段的最小值。 请与 "max" 属性配合使用,来创建合法值的范围。 |
multiple | multiple | 如果使用该属性,则允许一个以上的值。 |
name | field_name | 定义 input 元素的名称。 |
pattern | regexp_pattern | 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
placeholder | text | 规定帮助用户填写输入字段的提示。 |
readonly | readonly | 规定输入字段为只读。 |
required | required | 指示输入字段的值是必需的。 |
size | number_of_char | 定义输入字段的宽度。 |
src | URL | 定义以提交按钮形式显示的图像的 URL。 |
step | number | 规定输入字的的合法数字间隔。 |
type |
| 规定 input 元素的类型。 |
value | value | 规定 input 元素的值。 |
width |
| 定义 input 字段的宽度。(适用于 type="image") |
在下面的案例中,我们对一些常用的属性做了解释:
<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索"><br>
<!--
novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容,
这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可
-->
<input type="text" name="UserName" value="" required autocomplete="off"><br>
<!--
multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传
-->
<label>选择文件</label>
<input type="file" name="upload" value="" multiple="multiple"><br>
<!--
list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入
-->
<label>区号:</label>
<input type="text" name="age" value="" list="list1"><br>
<datalist id="list1">
<option value="0312">保定</option>
<option value="0311">石家庄</option>
<option value="010">北京</option>
<option value="0313">唐山</option>
</datalist>
<!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
-->
<input type="submit" name="subsave" value="提交">
<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
完结~~~~~~~~~~~~~
在HTML中,<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。每个表单元素开始于form元素,可以包含所有的表单控件
这些情况都会导致表单重复提交,造成数据重复,增加服务器负载,严重甚至会造成服务器宕机。因此有效防止表单重复提交有一定的必要性。
要从HTML表单中获取所有字段,可以使用:this.elements或event.target.elements,只有在预先知道所有字段并且它们保持稳定的情况下,才能使用。使用FormData构建具有所有字段的对象,之后可以转换,更新或将其发送到远程API。
使用ajax可以实现无刷新提交表单,但有人表示ajax的效率不行,或者是其他缺点,例如客户端臃肿,太多客户段代码造成开发上的成本,如果网速慢,则会出现ajax请求缓慢,页面空白的情况,对客户的体验不好。ajax请求不利于搜索引擎优化
最简单的HTML结构:网站最基础的就是注册,它是一个系统的交互基础;因为用户最后要去点击\\\"注册\\\"按钮,所以我们就在\\\"注册\\\"按钮上添加一个onclick事件属性,引用eg.regCheck()
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验。onsubmit指定的方法返回true,则提交数据;返回false不提交数据。
在使用layui进行ajax表单提交时,不回调,并且刷新了当前页面。在表单提交后添加 代码 return false;form.on()表单监控事件中一定要加 return false;
javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。对于在js中来判断checkbox是否被选中很简单,示例如下:
两个文件,一个写逻辑,一个写校验规则;特点:逻辑简单,代码量少,够用;不想看代码直接新建这两个文件复制代码,看最下面的使用方法;
表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。 如下,可以看到一点击提交按钮
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!