HTML中的form表单

  • form属性
  • 表单内容数据类型
  • 表单控件
  • input表单控件
  • type属性
  • 其他属性
  • button表单控件
  • label表单控件
  • 表单组件
  • select
  • option
  • 表单提交原理
  • get和post异同


form属性

<form action="1.jsp" name="messages" method="GET" target="self">
        <input type="text" name="username" id="aaa"  >
        <input type="submit">
    </form>

1.action属性：表示该form提交的地址，action是1.jsp表示表单数据要提交到1.jsp当中。
2.name属性：表示该表单的名称。
3.method属性：浏览器提交表单的http请求方法，通常我们用到的是get和post方法。
4.target属性：有两个值，_blank表示点击事件跳转到新页面；_self指当前页面跳转。

表单内容数据类型

通过enctype来设置表单内容数据类型，规定在表单发送到服务器前应该用何种方式对表单数据进行编码。
1.application/x-www-form-urlencoded(默认方式)
2.multipart/form-data不对字符进行编码，在使用包含文件上传控件的表单时，必须使用该属性值。它支持文本数据，也支持二进制数据上传，使用此值时，说明一般居有多媒体数据，数据大量的情况下，规定上传文件method是post方法，type属性必须是file。
3.text/plain:空格转换为“+”，但不对特殊字符进行编码。

表单控件

input表单控件

type属性

1.type属性：

属性值

表示

意义

text

单行文本框

password

密码框

输入的内容会被遮挡

checkbox

复选框

必须使用value属性来描述该组件所提交的值，使用checked属性默认

radio

单选按钮

必须用value属性描述该组件提交的值，一个单选按钮组的所有控件都应该具有相同的name值，这样，才能具有单选的意义。

submit

提交按钮

<form ><button>提交</button></form>都具有真实的提交功能

reset

重置按钮

file

文件按钮

该控件用于选中文件系统的某个文件

hidden

隐藏域

该控件不显示在页面内，但是其值会被提交

image

图像按钮

使用src来加载图片，使用alt来声明替换文本

button

普通按钮

不具有真实的提交功能

其他属性

1.name:用于设定提交数据的属性名
2.value:控件初始化，可选
3.checked:单、复选框默认选中属性
4.disabled:表示禁用组件，禁用组件的值不能被提交
5.size:初始宽度，以像素为单位，当控件类型是text和password时，宽度是整数值，默认为20。
6.maxlength:指定可以输入字符的最大值，使用于控件类型为text，password。

button表单控件

在form表单里button具有提交表单的功能，type指定控件类型的取值可以是：button,reset,submit;name属性是给按钮名称。

label表单控件

label表示某一控件的标题，于控件绑定，作用是可以点击标题的同时触发按钮。
使用方法：

<form >
        <!--方法一-->
        <input type="radio"  id="man" name="gender" value="male">
        <label for="man">男</label>
        <br>
        <!--方法二直接嵌套-->
        <label ><input type="radio" name="gender" value="woman"> 女</label>
    </form>

方法一注意事项：给input一个id,label中for属性值=input中 id值

表单组件

select

select用于表示下拉列表或列表，

1.select元素不包含size和multiple时表现为一个下拉列表；如果包含任意一个size和multiple时，表现为一个下拉列表。
2.size:列表行数
3.disabled:表示禁用控件，禁用控件的值不能被提交。
4.name：指定组件的名字

option

option常包含在,中。
1.disabled:于上述select一样。
2.value:定义控件的初始值，提交表单时，初始值会被提交给服务器。
3.selected:表示该选项默认被选中

表单提交原理

表单能够提交并提交成功接收返回数据时建立在http协议的基础上，http的工作原理就是客户端如何向服务器请求数据，服务器如何向浏览器返回数据。

客户端向服务器发送一个请求报文（请求行（请求的方法，URL，协议版本），请求头部，请求体），服务器以一个状态行作为响应。

http请求方法最常用到的是get和post。

get和post异同

1.安全性： get不安全，由于数据传输时数据被放在请求的URL中；post的所有操作对用户来说都是不可见的。
2.传送数据大小：get传送的数据量受URL限制，数据量较小，而post较大。
3.数据集的值限制：get限制form表单的数据集的值必须为ASCII字符，而post支持整个ISO10646字符集。
4.执行效率：get 执行效率比post好，form表单默认get。