当前位置：网站首页>4. The form with the input

4. The form with the input

2022-08-02 03:55:00 【Little Aning's cat】

htmlThe form with the input

看完本节,你将会了解到:

①Understand the form、The difference between the list and form
②To master the form of the definition of various types of commonly used input method
③了解GET请求与POST 请求的区别,并可以使用GETRequests to transfer data to another page

1.什么是HTML表单

表单是一个包含表单元素的区域.
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

比如:The search box is a form
在这里插入图片描述

2.Common form input element

①文本域（Text Fields）
文本域通过<input type="text">标签来设定,When need to type the letters in the form、数字等内容时,就会用到文本域.

②密码字段,用于输入密码
使用<input type="password">来定义

③单选按钮（Radio Buttons）

使用<input type="radio"> To define the form radio button

比如:选"是"“否”

④复选框
使用<input type="checkbox"> 定义复选框,In which the user can select one or more

④A drop-down list of radio
使用<select>定义一个下拉列表
与option连用

⑤提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件.表单的动作属性定义了目的文件的文件名.由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

3.GET与POST

(1)什么是 HTTP ？

超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信.

(2)两种 HTTP 请求方法：

GET 和 POST
GET - 从指定的资源请求数据.
POST - 向指定的资源提交要被处理的数据

(3)GET

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

(4)POST

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

4.演示代码

<!DOCTYPE html>
<html>
	<head>
	<title>
	The form with the input
	</title>
	</head>
	<body>
		<h1>The form with the input</h1>
		<form action = "1.html" method = "get">     <!-- 提交到1.html -->

			<!-- Text field instance -->
			姓名
			<input type="text" name="name" ><br>

			<!-- Password field instance -->
			密码
			<input type="password" name="password"><br>

			<!-- Radio button instance -->
			性别
			<input type="radio" name="sex" value="男">男 
			<input type="radio" name="sex" value="女">女<br>

			<!-- A drop-down list of radio instance -->
			是否已婚
			<select name="marryyyy">
				<option value="">请选择</option>
				<option value="已婚">已婚</option>
				<option value="未婚">未婚</option>
			</select><br>


			<!-- Check box instance -->
			兴趣爱好
			<input type="checkbox" name="hobby1" value="唱歌">唱歌
			<input type="checkbox" name="hobby2" value="画画">画画
			<input type="checkbox" name="hobby3" value="游戏">游戏
			<input type="checkbox" name="hobby4" value="运动">运动<br>
			
			<!-- Submit button instance -->
			<input type="submit" value="提交">

		</form>
	</body>

</html>