1.7HTML表单：

最新推荐文章于 2024-10-18 19:19:52 发布

kento_joyasa

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量481

点赞数 2

分类专栏： h5&&c3 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/beloved_yu/article/details/127513702

版权

h5&&c3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

学习资源来自：

AcWing

HTML 表单 | 菜鸟教程

HTML的表单用于收集用户的输入信息

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们使用form标签来创建表单；

<form>
.
input 元素
.
</form>

HTML <input>用来填写内容，常见类型有：

<input type="text">：创建基础的单行文本框。
<input type="number">：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。
<input type="email">：带有 “email” (电子邮箱) 类型标记的输入框元素 (<input>) 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。
<input type="password">：<input> 元素里有一种叫做 “password” 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。
<input type="radio">：<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。
常用属性有：

name: 名称
id: 唯一ID
maxlength：最大长度
minlength：最小长度
required：是否必填
placeholder：当表单控件为空时，控件中显示的内容

多数情况下用到的表单标签是输入标签：<input>

输入类型type表示类型：

文本域：（TEXT FIELD);

文本域通过 <input type="text">标签来设定：当用户需要键入字母数字等内容时，就会用到文本域。

<!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>Document</title>
</head>

<body>
    <form action="">
        First name: <input type="text" name="firstName"><br>
        Second name: <input type="text name=" secondName">
    </form>
</body>

</html>

表单本身并不可见，在大多数浏览器中，文本域默认是20个字符。

密码字段：

<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>Document</title>
</head>

<body>
    <form action="">
        Pasword: <input type="password">
    </form>
</body>

</html>

输入的东西，默认是看不到的。

单选按钮：（Radio buttons）

<!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>Document</title>
</head>

<body>
    <form action="">
        <input type="radio" name="sex">man<br>
        <input type="radio" name="sex">woman
    </form>
</body>

</html>

如果想实现单选操作，还是要加上name=“” 保证多选一。

复选框（CHEXKBOX）

<input type="checkbox">定义：

复选框可以实现一个或者多个选项：

<!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>Document</title>
</head>

<body>
    <form action="">
        <input type="checkbox" name="car" value="taxi">我喜欢出租<br>
        <input type="checkbox" name="car" value="suv">我喜欢suv<br>
        <input type="checkbox" name="car" value="littleCar">我喜欢轿车
    </form>
</body>

</html>

提交按钮：SUBMIT

<input type="submit"> 定义了提交按钮：

当用户点击确定按钮时，表单的内容就会被传到服务器，表单的action定义了服务器的文件名，action会对接收到的用户输入数据进行相关处理：

<!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>Document</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>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

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

<textarea>标签
HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

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

</body>
</html>

<select>与<option>标签
HTML <select> 元素表示一个提供选项菜单的控件。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

如果我们希望这个下拉列表预选：就加上selected

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="">
<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>
</form>

</body>
</html>

<button>标签
HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

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

</body>
</html>