HTML的基础教程（二）-- HTML表单_html表单教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54015136/article/details/129245737

本文介绍了HTML中的表单元素，包括text、radio、submit等类型，以及form、input、fieldset和legend等属性的使用。讨论了GET和POST提交方式的安全性和数据量限制，并展示了如何使用form属性关联多个表单。此外，还提到了select、option、datalist、button等元素，以及autofocus、placeholder、required等输入字段属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML表单

1.1 表单

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

1.2 类型

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

1.3 属性的学习

标签	描述
`<form>`	为用户输入定义 HTML 表单。
`<input>`	定义输入控件。

<fieldset> 组合表单数据:<fieldset> 元素组合表单中的相关数据。
<legend> 元素为 <fieldset> 元素定义标题。

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<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>

</body>
</html>

<form>
form 属性

form 属性规定元素所属的一个或多个表单。

提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>

 Last name: <input type="text" name="lname" form="form1">

里面的<mehtod>属性:

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项：
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！有两个提交按钮的表单。第一个使用 method=“get” 发送表单数据。第二个使用 method=“post” 发送表单数据：

<!DOCTYPE html>
<html>
<body>

<h1>input formmethod 属性</h1>

<p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>

<form action="/demo/html/action_page.php" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">
</form>

</body>
</html>

下面是<form>属性的列表：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

<target>属性值如下：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

<input> 属性

<type> 属性决定上传类型。<name> 是他的名称。

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

1.3.1 基础

<select> 元素定义下拉列表：
<option> 元素定义待选择的选项。您能够通过添加 selected 属性来定义预定义选项。

<!DOCTYPE html>
<html>
<body>

<p>您可以通过 selected 属性预选择某些选项。</p>

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

</body>
</html>

<datalist>定义多个可选的下拉值（和<select>属性不一样）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

</body>
</html>

1.3.2 花里胡哨

<button> 元素
<button> 元素定义可点击的按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

属性	描述
value 属性	value 属性规定输入字段的初始值：
readonly 属性	readonly 属性规定输入字段为只读（不能修改）：
disabled 属性	disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

autocomplete 属性

autocomplete 属性规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>填写并提交表单，然后重新加载该页面，看看自动完成功能是如何工作的。</p>
<p>注意，表单的自动完成功能是打开的，但是 e-mail 字段的自动完成功能是关闭的。</p>

</body>
</html>

autofocus 属性

autofocus 属性是布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。

height 和 width 属性

height 和 width 属性规定元素的高度和宽度。height 和 width 属性仅用于 <input type="image">。

<!--- 把图像定义为提交按钮，并设置 height 和 width 属性：--->
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

min 和 max 属性

min 和 max 属性规定<input>元素的最小值和最大值。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="0" max="10" />
<input type="submit" />
</form>

</body>
</html>

placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

</body>
</html>

required 属性

required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" value="提交" />
</form>

</body>
</html>