表单

创建表单

表单是由表单控件,提示信息,表单域等构成
HTML表单是用来搜集不同类型的用户信息

标签定义了表单,表单是HTML页面与浏览器端实现交互的重要手段。
表单信息的处理过程:当点击表单的提交按钮时,输入在表单中的信息就会上传到服务器中,然后由服务器的有关应用程序进行处理,处理后或将用户提交的信息储存在服务器端的数据库中,或者将有关的信息返回到客户端浏览器上。
对于一段信息,我们需要了解某些内容。对于表单,我们提交的内容是什么,提交给谁,用哪种方式提交,提交以后是什么反应。

form标签的属性

name,method,action,autocomplete,novalidate

  • name:表单的名称,通过为表单命名可以控制表单和后台程序之间的关系。
  • method:method有两个值get和post。get方式是将表单内容附在URL地址后面,post方式是将表单中填写的数据包含在表单的主题中,get方式有长度限制,如果太长可能会被截去一部分,同时url是显示的,所以get的安全性不如post方式。从字面意义上理解,get方式应该是用于获取某些东西,post则是邮寄某些东西。
  • action:用来定义表单处理程序的位置,其实也就是我们将表单送到哪里。
  • autocomplete:autocomplete属性指定了表单是否能自动完成功能,就是表单控件会记录下内容,当再次输入时,会将输入的历史记录显示在一个下拉列表里
  • novalidate:novalidate属性是指提交表单时取消对表单进行有效检查

    input元素及属性

    | 属性 | 值 | 描述 | | —- | —- | —- | | accept | audio/ video/ image/ MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type=”file”) | | align | left right top middle bottom | HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type=”image”) | | alt | text | 定义图像输入的替代文本。 (只针对type=”image”) | | autocomplete
    New | on off | autocomplete 属性规定 元素输入字段是否应该启用自动完成功能。 | | autofocus
    New | autofocus | 属性规定当页面加载时 元素应该自动获得焦点。 | | checked | checked | checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=”checkbox” 或者 type=”radio”) | | disabled | disabled | disabled 属性规定应该禁用的 元素。 | | form
    New | form_id | form 属性规定 元素所属的一个或多个表单。 | | formaction
    New | URL | 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=”submit” 和 type=”image”) | | formenctype
    New | application/x-www-form-urlencoded multipart/form-data text/plain | 属性规定当表单数据提交到服务器时如何编码(只适合 type=”submit” 和 type=”image”)。 | | formmethod
    New | get post | 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=”submit” 和 type=”image”) | | formnovalidate
    New | formnovalidate | formnovalidate 属性覆盖 元素的 novalidate 属性。 | | formtarget
    New | blank _self _parent _top _framename | 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=”submit” 和 type=”image”) | | height
    New | pixels | 规定 元素的高度。(只针对type=”image”) | | list
    New | datalist_id | 属性引用 元素,其中包含 元素的预定义选项。 | | max
    New | number date | 属性规定 元素的最大值。 | | maxlength | number | 属性规定 元素中允许的最大字符数。 | | min
    New | number date | 属性规定 元素的最小值。 | | multiple
    New | multiple | 属性规定允许用户输入到 元素的多个值。 | | name | text | name 属性规定 元素的名称。 | | pattern
    New | regexp | pattern 属性规定用于验证 元素的值的正则表达式。 | | placeholder
    New | text | placeholder 属性规定可描述输入 字段预期值的简短的提示信息 。 | | readonly | readonly | readonly 属性规定输入字段是只读的。 | | required
    New | required | 属性规定必需在提交表单之前填写输入字段。 | | size | number | size 属性规定以字符数计的 元素的可见宽度。 | | src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=”image”) | | step
    New | number | step 属性规定 元素的合法数字间隔。 | | type | button
    checkbox
    color
    date
    datetime
    datetime-local
    email
    file
    hidden
    image
    month
    number
    password
    radio
    range
    reset
    search
    submit
    tel
    text
    time
    url
    week | type 属性规定要显示的 元素的类型。 | | value | text | 指定 元素 value 的值。 | | width
    *New
    | pixels | width 属性规定 元素的宽度。 (只针对type=”image”) |

input type属性

button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段(带有 calendar 控件)
datetime 定义日期字段(带有 calendar 和 time 控件)
datetime-local 定义日期字段(带有 calendar 和 time 控件)
month 定义日期字段的月(带有 calendar 控件)
week 定义日期字段的周(带有 calendar 控件)
time 定义日期字段的时、分、秒(带有 time 控件)
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 “浏览…” 按钮,供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。


当type=number时还可以对输入框进行限制
value:指定输入框默认值
max:指定输入框可接受的最大值
min:指定输入框可接受的最小值
step:输入域合法的间隔,默认为1

input的其他属性

autofocus
autofocus属性规定在页面加载时,域自动地获得焦点
autofous属性适用于button、input、keygen、select和textarea元素
form
form属性规定输入域所属的一个或多个表单,form属性必须和所属表单的id
form属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔
[注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
list
大多数输入类型包含一个属性list,它和一个新元素datalist结合使用,这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示,而是为其他元素的list属性提供数据
list属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器及safari浏览器不支持
multiple
multiple属性规定按住ctrl按键,输入字段可以选择多个值
该属性适用于type=”email”和”file”的input元素
[注意]该属性IE9-浏览器不支持
min,max,step
min属性规定输入域所允许的最大值
max属性规定输入域所允许的最小值
step属性为输入域规定合法的数字间隔
min、max、step属性适用于以下类型的input元素:date pickers、number、range
pattern
pattern属性规定用于验证input域的模式。模型pattern是正则表达式
常用的正则表达式:

  • 信用卡 [0-9]{13,16}
  • 银联卡 ^62[0-5]\d{13,16}$
  • Visa: ^4[0-9]{12}(?:[0-9]{3})?$
  • 万事达:^5[1-5][0-9]{14}$
  • QQ号码: [1-9][0-9]{4,14}
  • 手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
  • 身份证:^([0-9]){7,18}(x|X)?$
  • 密码:^[a-zA-Z]\w{5,17}$ 字母开头,长度在6~18之间,只能包含字母、数字和下划线
  • 强密码:^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间
  • 7个汉字或14个字符:^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$

pattern属性适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器及safari浏览器不支持
placeholder
placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器不支持
required
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
[注意]IE9-浏览器及safari浏览器不支持

其他表单元素

textarea
多行纯文本编辑元素使用


多行纯文本编辑元素的属性包括:

  • name:用于设置随表单一同提交到服务器的相关数据的名字
  • rows和cols:用于声明