前端---HTML5表单相关元素和属性简介

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

<form/>元素用于生成输入表单,该元素不会生成可视化部分。

注:在HTML5规范以前,表单控件都需要放在<form/>元素之内。

首先我们介绍一下form下面几个核心属性:

  • action:指定当单击表单内的“确认”按钮时,该表单被提交到哪个地址,可以是绝对地址,也可以是相对地址。该属性必填。

  • method:指定提交表单时发送何种类型的请求,该属性值可为get为post,分别用于发送GET或POST请求。通常建议发送POST请求。该属性必填。(*非常重要*)

  • enctype:指定对表单内容进行编码所使用的字符集。

  • name:指定表单的唯一名称。

  • target:指定使用哪种方式打开目标URL(提交请求会打开另一个URL资源),与超链接的target可接受的属性值完全一样,该属性可以是_blank、_parent、_self和_top四个值之一。

在上面属性中的method属性指定表单的提交方式,分为get方式请求和post方式请求:

  • GET方式的请求:GET方式的请求会将请求参数的名和值转换成字符串,并附加在原URL之后。如果请求走浏览器方式的话,一般不能大于2KB。如果走其他方式无限制。一般用于读请求。

  • POST方式的请求:POST方式传送的数据量较大,请求参数大小不受限制。而且POST方式发送的请求参数以及对应的值放在HTML HEADER中传输,用户不能再地址栏里看到请求参数值,安全性相对较高。一般用于写请求。

 另需格外注意的是enctype属性,该属性用于指定表单数据的编码方式,该属性有如下3个值:

  • application/x-www-form-unlencoded:这是默认的编码方式,它只处理表单控件里的value属性值,采用这种编码方式的表单会将表单控件的值处理成URL编码方式。
  • multipart/form-data:这种编码方式会以二进制流的方式来处理表单数据,这种编码方式会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性值。
  • text/plain:当表单的action属性值为mailto:URL的形式时使用这种编码方式比较方便,这种编码方式主要使用于直接通过表单发送邮件的方式。 

最后在注重介绍一下我在编程中遇到的form表单中的select与option元素

<select.../>元素用于创界列表框或下拉菜单,该元素必须和<option.../> 元素结合使用,每个<option.../>元素代表一个列表项或菜单项。当用户选中了多个列表项或菜单项后,这些列表项或菜单项的value值将作为该<select.../>元素所对应的请求参数值。<select.../>元素还可以指定如下几个属性:

  1. disabled:设置禁用该列表框和下拉菜单。
  2. multiple:设置该列表框和下拉菜单是否允许多选。
  3. size:指定该列表框内可同时显示多少个列表项。

在<select.../>元素里,只能包含如下两种子元素:

  • <option.../>:用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的文本。
  • <optgroup.../>:用于定义列表项或菜单组项。该元素里只能包含<option.../>子元素,处于<optgroup.../>里的<option.../>就属于该组。

猜你喜欢

转载自blog.csdn.net/weixin_42504145/article/details/82794742
今日推荐