HTML 表单-CSDN博客

本文链接：https://blog.csdn.net/qq_46012192/article/details/104380948

HTML 表单用于搜集不同类型的用户输入。
（ps:本文章是预习内容，纯文字，详细请看下面的网页）
借鉴网页：https://www.w3school.com.cn/html/html_forms.asp
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input>元素
<input>元素是最重要的表单元素。

元素有很多形态，根据不同的 type 属性。

提交按钮
元素<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

POST&GET

使用 GET 时，表单数据在页面地址栏中是可见的
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：

	<form action="/demo/demo_form.asp">
	First name:<br>
	<input type="text" value="Mickey">
	<br>
	Last name:<br>
	<input type="text" name="lastname" value="Mouse">
	<br><br>
	<input type="submit" value="Submit">
	</form> 
	<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
	<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

用 `<fieldset>` 组合表单数据

<fieldset>元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

`<select>` 元素（下拉列表）

<select> 元素定义下拉列表：

<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

HTML5 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>