当前位置：首页 > article >正文

HTML中的表单

article 2025/8/27 17:49:30

HTML中的表单：
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置
多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性type定义的。
大多数经常被用到的输入类型如下：
文本域1（Text Fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
举例代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文本域示例</title> 
</head>
<body><form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form><p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p></body>
</html>

以上代码运行结果如下图所示：
在这里插入图片描述

文本域2

<textarea rows="10" cols="30">
这是一个文本框区域。
</textarea>

以上是关于开发文本域的示例代码，其中 rows="10"和cols="30"是该框的尺寸大小。
示例代码运行结果如下：
在这里插入图片描述
（---------------------------------------分割线---------------------------------------）

（---------------------------------------分割线---------------------------------------）

密码字段
密码字段通过标签<input type="password"> 来定义
举例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>密码字段示例</title>
</head><body><form action="">Username:<input type="text" name="user"><br> Password:<input type="password" name="password"></form><p><b>注意：</b>密码字段中的字符是隐藏的（显示为星号或者圆圈）。</p>
</body></html>

以上代码运行结果如下图：
在这里插入图片描述
（---------------------------------------分割线---------------------------------------）

单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
举例代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>单选按钮示例</title> 
</head>
<body><form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form><p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同类型的单选按钮就不会被选中。</p></body>
</html>

以上代码运行结果如下：
在这里插入图片描述
（---------------------------------------分割线---------------------------------------）

复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
举例代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>复选框示例</title> 
</head>
<body><form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form></body>
</html>

以上代码运行结果如下：
在这里插入图片描述
（---------------------------------------分割线---------------------------------------）
提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
举例代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>演示提交按钮</title> 
</head>
<body><form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form></body>
</html>

以上代码运行结果如图所示：
在这里插入图片描述
（---------------------------------------分割线---------------------------------------）

简单的下拉按钮
option value="volvo" 定义了下拉列表，当用户将鼠标点击该框的时候，会出现下拉选项。
举例代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>下拉列表举例</title> 
</head>
<body><form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form></body>
</html>

以上代码运行结果如图所示：
在这里插入图片描述
（---------------------------------------分割线---------------------------------------）

单个按钮：
<input type="button" value=" "> 定义了单个按钮，其中value=" "里面填的是按钮框里所显示的内容
举例代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>单个按钮示例</title> 
</head>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>