表单

1.表单的作用

表单的作用

• 将客户端的数据提交给服务器，（表单是客户与服务器交互的一种方式）

表单元素怎么写

• form
• 注意：表单中的数据想要提交，一定要有name属性存在。

表单active属性和method属性

样式名	描述
active	指定服务器地址
method	指定表单数据的提交方式（get和post）

get和post请求区别

提交方式	特点	区别
get	默认是get方式，参数跟在地址栏后面，以?隔开，多个参数之间以&符号分隔，安全性低。	提交的数据有大小限制，不能超过1Kb
post	参数在地址栏是不可见的，安全性更高	提交的数据是没有大小限制的

标签元素

1.单选框

• 选择性别男女时

<input type=“radio”/>

• type=“radio”表单选框
• 需要注意的是：同一组单选框的name属性的值要一样。

2.多选框

• 填写兴趣爱好时

<input type=“checkbox”/>

• type=“checkbox”表示多选框
• 需要注意的是：同一组单选框的name属性的值要一样。

3.文本框

• input 标签 输入姓名

input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

4.密码框

• 使用标签来创建一个输入框，使用type属性来指定input元素的类型为密码框，其输入框的值为value属性的值。

<input type=“password” name=“pwd” value=“123456”/>
效果：密码（******）

5.文件上传框

• 选择文件上传

<input type=“file” name=“photo” accept=“image/*”/>

• accept指定选择文件类型

6.文本区域

• <textarea>标签可以定义多行的文本输入框。用宽（width）和高（height）来定义输入框的大小，用maxlength来定义文本区域最大能输入的字符数。

<textarea maxlength=“15”></textarea>

7.提交按钮

• 创建一个提交按钮，用于向服务器端发送数据。

<input type=“submit” value=“提交”/>

8.重置按钮

• 还原到开始状态

<input type=“reset” value=“重置”/>

9.按钮

• 在表单中没有具体功能，主要用于后期程序开发

<input type=“button” value=“按钮”/>

10.下拉选择框

• <select>容器
• <option>代表其中一项
• selected表默认选中 multiple表多选

<select>
<option value=“apple”>苹果</option>
<option value=“banana”>香蕉</option>
<option value=“pear”>梨</option>
<option value=“apple”>菠萝</option>
</select>

表单元素的name属性和value属性作用

属性	作用
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值

lable标签使用

<label for=“user”>用户：</label>
<input type=“text” id=“user” name=“user”/><br>

• 需要注意的是：<label>标签的for属性的值要和相应表单元素的id的值相同。这样才能把<label>标签和表单元素绑定到一起。