前端——Form表单

表单相关的元素和属性

  • HTML使用表单向服务器提交请求,表单、表单控件的主要作用就是收集用户输入,当用户提交表单时,用户输入内容将被作为请求参数提交到远程服务器。

一、Form元素

Form元素用于生成输入表单,是一个非可视化结构,所有需要向服务器提交请求的数据都需要放在Form所包含的表单控件中。(每个有name属性的表单控件对应一个请求参数,没有name属性的表单控件不会生成请求参数。拥有共同name的控件为一组,只生成一个请求参数,但该参数有多个值。)

1.Form元素属性

  • 通用属性:id、style、class。
  • 事件属性:onclick
  • action:指定表单被提交的地址。必填
  • method:指定提交表单的请求类型,分为GET、POST。GET方式的请求会将请求参数的名和值转换成字符串,并附加在原URL之后,因此可以在地址栏中看到请求参数名(name的值)和值(value的值)。POST方式发送的请求参数以及对应的值放在HTML HEADER中传输,用户不能再地址栏里看到请求参数值,安全性相对较高。
  • name:表单名称
  • target:指定使用哪种方式打开URL(提交请求会打开另一个URL资源)。_blank、_parent、_self、_top。

2.Form元素内控件

①input元素

  • 单行文本框:type属性为text。
  • 密码输入框:type属性为password。
  • 隐藏域:type属性为hidden。
  • 单选框:type属性为radio。(name值相同的为同一组。)
  • 复选框:type属性为checkbox。
  • 图像域:type属性为image。
  • 文件上传域:type属性为file。(相当于图形版提交。)
  • 提交:type属性为submit。
  • 重设:type属性为reset。
  • 无动作按钮:type属性为button。
  • 属性 checked:设置单选框、复选框初始状态是否为选中状态。
  • 属性 maxlength:指定文本框所允许输入最大字符数。
  • 属性 readonly:指定只读。
  • 属性 src、width、height:指定图像URL、宽、高。(type为image时)。
    (以下为HTML5新增type)
  • 颜色选择器:type为color。
  • 日期选择器:type为date。
  • 时间选择器:type为time。
  • 本地日期、时间选择器:datetime-local。
  • 周选择:type为week。
  • 月份选择器:type为month。
  • E-mail输入框:type为email。
  • 电话号码输入框:type为tel。
  • URL输入框:type为url。
  • 只能输入数值的文本框:type为number。
  • 拖动条:type为range。此时,input可以选择min(拖动条最小值)、max(拖动条最大值)、step(步长)。
  • 搜索输入框:type为search。

②select与option元素

<select…/>元素创建列表框或者下拉菜单(只要select元素指定了size或者multiple元素则生成列表框),option即为一个列表项或菜单项。

  • select属性 multiple:设置列表框和下拉菜单是否允许多眩
  • select属性 size:指定列表框内可同时显示多少个列表项。
  • select子元素 option:项
  • select子元素 optgroup:将option项分组。
  • option属性 disabled:禁用该选项。
  • option属性 selected:指定初始状态是否被选中。
  • option属性 value:该项的请求参数值。
  • optgroup属性 label:指定该组标签。必填
  • optgroup属性 disabled:禁用该选项组。

③textarea元素

textarea用于生成多行文本域

  • 属性cols:指定文本域宽度
  • 属性rows:指定文本域高度
  • disabled:禁用文本域
  • readonly:只读
  • maxlength:设置文本域最多可以输入的字符数。
  • wrap:指定多行文本域是否添加换行符。如果不添加换行符,那么请求参数将会舍弃文本域的格式,只保留文本发送到URL。如果文本较多且格式较复杂,应指定wrap属性。

④fieldset与legend元素

fieldset元素用于将表单元素分组并以特殊的边界显示分组效果。legend元素为fieldset的子元素,表示分组的标题。

  • 属性 name:指定fieldset名称
  • 属性 form:指定该fieldset属于此表单
  • 属性 disabled:禁用该组表单元素

⑤form属性

通过为表单控件指定form元素,可以使表单控件定义在form元素之外。

⑥autofocus属性

表单增加此属性后,加载页面后该控件获得焦点。 因此该属性只能有一个属性设置。

⑦placeholder属性

当用户还未在单行文本框、多行文本域输入内容时,显示placeholder的提示信息。

⑧list属性与datalist元素

将文本框和下拉菜单结合。input元素设置list属性为指定datalist元素的id,将文本框与下拉菜单结合。

  • datalist元素表示一个下拉菜单,id属性唯一标识。option元素表示下拉菜单的项。

⑨autocomplete属性

如果启用autocomplete功能,浏览器会根据用户上次提交的数据生成列表框共用户选择。

⑩output元素

output表单控件用于显示其他元素的相关值得输出,一般配合脚本使用。output属性只属于表单,所以output要么位于表单内部,要么for属性指定表单。

(11)meter元素

表示一个已知最大值和最小值的计数仪表。
属性:value(当前值)、min、max、low、high、optimum。

(12)progress元素

表示进度条
属性:
max:指定进度条完成时的值。
value:当前值。

3.客户端校验(HTML5)

①HTML5通过input的属性来进行校验

  • required:指定该表单控件必须填写。
  • pattern:指定该表单控件的值必须符合pattern属性值得样式。
  • min、max、step:针对数值、日期类型的input元素。限制value值在min-max之间,并符合step步长。
    ②通过调用checkvalidity方法进行校验
    表单对象调用checkvalidity方法,返回true则表示可以通过输入校验,fanhuifalse则不可以通过。
    ③关闭校验
    通过为提交元素(type=“submit”)设置属性formnovalidate。