Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

html5表单及验证的学习 #32

Open
LiberoWang opened this issue Oct 30, 2018 · 0 comments
Open

html5表单及验证的学习 #32

LiberoWang opened this issue Oct 30, 2018 · 0 comments

Comments

@LiberoWang
Copy link

LiberoWang commented Oct 30, 2018

html表单元素

default

html5新增的表单元素:

<keygen>、<datalist>、<output>
新元素使用
<datalist><select>区别

input元素(类型/属性)

input元素的type类型(23种)

type类型 描述
button 定义一个按钮,没有任何行为。和单纯的<button>元素相比,没有<button>使用css方便。如果不是想要按钮重置(reset)或者提交(submit)
password 定义密码字段。密码字段的字符不会明文显示,而是以星号或者原点代替。
text input默认的类型。定义一个单行文本,在大多数浏览器中的默认宽度是20个字符)
checkbox 复选框,默认是小方格,可以选择多个。(checked属性是默认选中项)
radio 单选框,默认是小圆圈,只能选择一个。(checked属性是默认选中项)
submit 通常被认为是一个提交按钮。当点击按钮时,向表单处理程序提交本表单的数据。表单处理程序是在表单的action属性中指定
file 定义文件选择字段,供用户上传文件。(multiple属性可以同时上传多个文件,accept属性规定服务器接收到的文件类型。MIME类型)
hidden 隐藏掉表单控件,以前是用来收集一些数据的。
image 定义图像形式的提交按钮。接受所有的<img>,会像所有的<submit>一样提交图片,如果想上传图片,可以用这个类型。该类型可以设置width、height、src、alt这四个属性。用这种方式提交会发生表单提交两次的现象,经常会造成表单元素被重复提交,数据库被写入异常!原因:HTML 中 image的描述是“创建一个图像控件,该控件单击后将导致表单立即被提交”.<img src="xxx.gif" onclick="return dosubmit();">
reset 重置按钮。点击重置按钮,表单的数据全部重置,会被清空。
html5新增类型
email 定义e-mail地址输入域。外观上和text类型没有差别。根据浏览器支持,能够在被提交的时候自动对电子邮件地址进行验证。在移动端,输入键盘会自动变成有@数字A-Z. 等,与输入邮箱有关的字符。
url 外观和功能与email类型相似,用于指定一个web地址。根据浏览器支持,在提交时能够自动验证url的字段。在移动端上会自动转换成有类似.com\等方便用户输入的web地址键盘。
tel 用于指定输入的是电话号码。在移动端上,键盘会变成电话号码的键盘。也可以自定义一些格式,需要与pattern属性连用。
number 用于指定输入的是数字,键盘为输入数字的键盘。(但是会存在一定的兼容问题,而且在浏览器样式上会出现上下箭头的标示)
range 根据浏览器支持,输入字段能够显示为滑块的控件。(移动端:需要自定义和浏览器不一致)
search 提供一个搜索栏。如果有文本输入的话,很多浏览器会在最右边提供一个清空搜索栏的小叉,点了就清空该搜索栏。
color 在浏览器支持的情况下,提供一个拾色器。颜色值以十六进制数值提交。(注意:safari和IE不支持该类型)
date 日期选择器,可以用来选择年月日。
datetime 该属性提供两个栏,一个年月日,一个用于时分秒。时区被设置成了UTC。
datetime-local datetime几乎完全一样,只是不是UTC时间。
month 只包括了年,月的时间选择器。
time 只包括了时分秒的时间选择器,而且是24小时制
week 该属性是输入多少年的多少周,你可以选择日期,但是返回的是XXXX年XX周

input的属性

属性名称 描述
type 该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text"
required 标记一个字段是否为必须。如果一个字段被标记为required = "required"(严格模式下),或者required。如果这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。
pattern 该属性包含了一个JavaScript风格的正则表达式,输入的内容必须完全匹配该正则表达式,不然就算输入的内容无效。type属性的值为text,search,tel,url或者email时,此属性适用。
min/max 这两个属性用于日期date时间time等输入,还有numberrange。顾名思义,它们的作用是限制最大值,最小值。
step 规定输入字段的合法数字间隔.和max min类似,作用是提供一个可以上下点的按钮,比如当前数字是1,你设置了step = "5",点一下上的按钮,就变成6了。使用min和max属性限制可以设置数字或者日期时间值的增量。如果此属性为设置任何值,则控件仅接受大于最小步长值的倍数的值。
placeholder 一般是用来提示用户输入的,当用户真的输入了文字之后,会被输入的文字覆盖。
readonly 该属性会让表单空控件不可编辑。这里的不可编辑不是禁用,只是不能编辑文本而已.
disabled 该属性会禁用一个表单元素。
maxlength 该属性用于限制用户输入的最大字数限制。(如果type的值是textemailsearchpasswordtel、或者url,那么这个属性指明了用户最多可以输入的字符个数,对于其他类型的输入框,该属性将被忽略。)
form HTML5中,表单控件已经没有必要嵌套在一个表单中,新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中,随着另一个表单提交。<form id="form1"></form> <p> <label for="admin">admin</label> <input type="text" id="admin" form="form1"/> </p>
autocomplete 自动完成,用户输入一部分,后面的自动补全。需要浏览器保存用户输入的内容,以便下一次自动补全。
autofocus 该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。
accept 规定通过文件上传来提交的文件的类型(只针对type="file"
checked 该元素的type属性的值为radio或者checkbox,则布尔值的存在表明该控件是否是选择的状态。
multiple 属性规定允许用户输入到<input>元素的多个值(适用于type="file/email")。
height 规定<input>元素的高度(只针对type="image",如height="100"
width 规定<input>元素的宽度(只针对type="image",如width="100"
name 控件的名称,与表单数据一起提交。

disabled和readonly区别

用于为表单数据指定约束:
表单提交时重置警告提示样式

  • <input><select><textarea>元素上的required属性,指定必须提供元素的值。(在<input>元素上,required只能与特定的type特性结合起来生效)。
  • <input>元素上的pattern特性用于限定元素值必须匹配一个特定的正则表达式。
  • <input>元素上的minmax特性限定了能够输入元素的最大值和最小值。
  • <input>元素的step特性(与minmax特性结合使用)限定了输入值的间隔。如果一个值与允许的值的梯级不相符,则它无法通过验证。
  • <input><textarea>元素的maxlength特性限制了用户能够输入的最大字符数。
  • typeurlemail值分别用于限定输入值是否为有效的url或者电子邮件。

此外,若要阻止对表单进行约束验证,你可以在<form>上设置novalidate特性,或者button<input>元素(type是submit或是image)上设置formnovalidate特性。这些特性都指定了当表单提交时不做验证。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant