表单结构更灵活要提交数据的控件可以布局在form标签之外,看下面的代码,
表单元素可以写到form
元素之外,只需在元素中加入form="form1"
属性,也可提交到form元素指定的服务器地址新增表单元素我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等,html5中新增加了一些表单元素,下面列出这些元素及其作用email类型用于验证email的格式,当提交表单时会自动验证email域的值url类型用于验证URL地址的格式,当提交表单时会自动验证url域的值number类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持range类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100日期和时间类型:HTML5拥有多个可供选取日期和时间的新输入类型:date-选取日、月、年month-选取月、年week-选取周和年time-选取时间(小时和分钟)datetime-选取时间、日、月、年(UTC时间)datetime-local-选取时间、日、月、年(本地时间)search类型用于搜索域,比如站点搜索或Google搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标tel类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持color类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中案例如下,大家可以将代码拷贝或者自己编写之后,在浏览器中查看效果浏览器的支持情况chrome:firefox:Opera:MicrosoftEdge:好,我们对微软的进步进行表扬!新增表单属性除了新增的表单元素之外,html5中还新增了一些表单属性新的form属性:autocompletenovalidate新的input属性:autocompleteautofocusformformoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)height和widthlistmin,max和stepmultiplepattern(regexp)placeholderrequired在下面的案例中,我们对一些常用的属性做了解释,大家直接看代码和代码旁边的注释,然后对照浏览器的运行结果就理解其意义了1)email:邮件输入域,在表达提交时提供的邮箱格式验证,并d出一个提示窗口。
2)url:地址输入域,在表单提交时提供简单的URL地址格式验证,并d出一个提示窗口。
3)number:数字输入域,(可设置min、max、step)。
4)tel:电话号码输入域,在手机浏览器d出数字输入域。
5)search:搜索输入域,在手机浏览器右下角呈现搜索按键。
6)range:范围选择空件。
7)color:颜色选择控件。
8)date/month/week:时间选择控件。
1)autocomplete: autocomplete属性规定输入的字段是否应该启用自动完成功能。
自动完成功能允许浏览器预测 字段输入,当用户在字段开始键入时,浏览器基于键入的值。应该显示出在字段中填写的选项。
2)placeholder:占位符,用于在输入框中显示提示性文字,与value不同,不能被提交。
3)autofoaus:自动获取输入焦点。
4)multiple:是否允许多个输入值,若声明该属性,那么输入框允许输入多个用逗号隔开的值。
5)form:值为某个表单的id,若设置,则该输入域可放在该表单外面。
6)required:在表单提交时会验证是否有输入,没有则d出提示信息。
7)maxlength:限制最大长度,只有在有输入的情况下才有用,不区分中英文。
minlength:限制最小长度,但它不是H5标准属性,仅部分浏览器支持。
8)min:限定输入数字的最小值。
9)max:限定输入数字的最大值。
10)step:限定输入数字的步长,与min连用。
11)pattern:指定一个正则表达式,对输入进行验证。(正则默认首尾加^$)
作用:getCurrentPosition() 方法来获得用户的位置。
格式:一般在js中书写方式。
案例:
评论列表(0条)