IT课程 HTML基础 013_表单和用户输入

表单

HTML 表单（Form）是 HTML 中非常重要的一部分，它能让用户在网页上输入信息，并将信息提交到服务器。

示例：

<form action="/submit" method="post">
  <!-- 表单元素在这里 -->
</form>

<form>元素定义了用户输入数据的区域，并且可以包含不同类型的输入元素，如文本域<textarea>、下拉列表<select>、单选框<radio>、复选框<checkbox>和按钮<button>等。

表单属性：

• action：定义表单数据提交到服务器后的处理文件的 URL。
• method：定义数据发送到服务器所使用的HTTP方法，常用的值有 “get” 和 “post”。
• name： 用于指定表单的名称。表单名称用于标识表单，并在服务器端处理表单数据时使用。
• enctype：用于指定表单数据的编码方式。表单数据可以使用 application/x-www-form-urlencoded 或 multipart/form-data 编码方式。
• autocomplete：用于指定是否启用表单的自动完成功能。如果设置为 on，则浏览器将会自动填充表单中之前输入过的数据。
• novalidate：用于指定是否验证表单数据。如果设置为 on，则表单数据在提交之前将不会进行验证。
• form 表单本身并不可见。

文本字段

在表单中，我们经常需要用户输入字母、数字等文本内容。这可以通过<input>元素完成，其type属性设置为 “text”。

示例：

<form>
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="age">
</form>

效果：

示例效果

在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

如果你需要用户输入密码，可以将<input>元素的type属性设置为 “password”，输入的内容会被隐藏起来。

示例：

<form>
密码: <input type="password" name="pwd">
</form>

效果：

示例效果

• 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

单选按钮（Radio Buttons）

单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的type属性值为 “radio”。

示例：

<form action="">
性别：
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</form>

效果：

示例效果

• 单选按钮的 name 属性值必须相同，否则它们将不会属于同一个组。
• checked 属性用于指定单选框是否默认选中。

复选框（Checkboxes）

复选框可以选取一个或多个选项，使用 <input type="checkbox"> 定义

示例：

<form>
  您使用过的APP：
  <input type="checkbox" name="app" value="jd">京东
  <input type="checkbox" name="app" value="wechat">微信
  <input type="checkbox" name="app" value="qq">QQ
  <input type="checkbox" name="app" value="douyin">抖音
</form>

效果：

示例效果

• checked 属性用于指定复选框是否默认选中。

下拉列表（select）

下拉列表可以让用户从多个选项中选择一个。它由<select>元素创建，并使用<option>元素来定义选项。

示例：

<form action="">
	请选择您的国家：
	<select name="country">
	  <option value="china">中国</option>
	  <option value="us">美国</option>
	  <option value="japan">日本</option>
	</select>
</form>

效果：

示例效果

• selected 属性用于指定下拉列表的默认选项。
• disabled 属性用于指定下拉列表是否可用。
• 可以使用 size 属性来指定下拉列表中可见选项的数量。

提交按钮（Submit、Reset、Button）

表单通常需要一个按钮来提交或确认用户的输入。submit、reset 和 button 都是 HTML 中的表单按钮元素。

示例：

<form action="/submit" method="post">
  <input type="submit" value="提交按钮">
  <input type="reset" value="重置按钮">
  <button type="button" value="确认按钮">确认按钮</button>
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="图像按钮" width="50" height="50">
</form>

效果：

示例效果

• post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
• get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.zhaojian.net/?page=1，这里的 page=1 就是 get 方法提交的数据。

表单元素及属性