前端开发：HTML（5）—— 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action=""></form>
</body>
</html>

然后点击运行，我们创建了一个表单。在网页按 fn + F12 打开控制台窗口，点击左上角的图标，我们就能选中html的代码进行分析。从下图我们可以看到，form创建了一个表单域。

2.输入框

input是一个有许多类型的单个标签。我们可以通过type属性来确定input的类型。

文本框：text

密码框：password

单选框：radio

复选框：checkbox

文本框和密码框

html 复制代码

<body>
    <form action=""></form>
        账号 <input type="text"> <!--文本框--><br>
        密码 <input type="password"> <!--密码框-->
</body>

运行到网页之后，我们可以从框中输入信息。密码框输入的信息会呈现加密状态。这是我们打开控制台，将password修改为text，会发现我们输入的加密信息变为了文本框输出。

单选框和复选框

1.单选框

单选框之间必须具备相同的name属性，才能实现多选一的效果。

加上checked属性会自动勾选上对应的选项。

html 复制代码

性别<input type="radio" name="sex"> 男
<input type="radio" name="sex" checked="checked"> 女

2.复选框

单选框只能选中一个，因此需要多选框。其操作方式同单选框，将radio换为checkbox即可。

html 复制代码

 爱好<input type="checkbox" name="favor"> 音乐
 <input type="checkbox" name="favor"> 美术
 <input type="checkbox" name="favor"> 游戏

3.按钮

（1）普通按钮

按钮属性为button。按钮也是在input属性中进行使用的。button表示控件类型为按钮，value表示文字说明，onclick为点击反馈。

html 复制代码

<input type="button" value="this is a simple button" onclick="alert('hello')"

点击运行。我们可以点击按钮，点击后会反馈'hello'文字。

（2）提交按钮

提交属性为submit。提交按钮必须放在form标签内部，会将网页中的信息提交到后台。我们可以在form的action属性中添加另一个网页的网址，点击提交按钮后就会将信息提交并跳转到对应的网址上。

html 复制代码

<body>
    <form action="http://www.baidu.com">
        姓名<input type="text" name="name"><br>
        <br>
        <input type="submit">
    </form>
</body>

（3）重置按钮

reset表示将信息重置。在输入信息后点击重置按钮，会将所有数据清空。

html 复制代码

 <input type="reset">

（4）选择文件

file表示可以从本地选择文件。与提交按钮配合可以上传文件到对应的网址。

html 复制代码

<input type="file">

4.label标签

label标签主要作用为提升表单控件的可用性和可访问性，为表单元素添加关联的表单控件。例如点击聚焦，扩大交互区域，提升可访问性等。关于label标签后面我们还会遇到，这里就简单使用label标签来实现单选按钮组扩大点击区域。

我们先写两个性别单选框，加上id属性，为了和label相关联：

html 复制代码

<input type="radio" name="sex" id="male"> 男
<input type="radio" name="sex" id="female"> 女

在label标签中，要带一个for属性，for属性必须要和单选框的id属性相匹配才能正确关联。然后将文字移到label标签内。这样我们在点击对应文字的时候也能进行选择了。

html 复制代码

<label for="male"> 男 </label>
<input type="radio" name="sex" id="male">
<label for="female"> 女 </label>
<input type="radio" name="sex" id="female">

5.select标签

select标签支持我们在多个选项中选择一项。在select内需要使用option标来确定选项内容。

html 复制代码

<select name="" id="">
        <option value="">--请选择年份--</option>
        <option value="">--2025--</option>
        <option value="">--2024--</option>
        <option value="">--2023--</option>
        <option value="">--2022--</option>
        <option value="">--2021--</option>
        <option value="">--2020--</option>
</select>

6.textarea标签

textarea是HTML中用于创建多行纯文本输入区域的表单元素，适用于需要用户输入较长文本的情况。其有以下关键属性：

name：（必填）提交表单时的数据键名

id：唯一标识符（用于JS/CSS操作或label关联）

rows：可见文本行数

cols：可见文本列数

placeholder：输入前的灰色提示文本

maxlength：允许的最大字符数

minlength：允许的最小字符数

wrap：文本的换行方式（soft/hard）

例如我们创建一个留言评论区：

html 复制代码

<label for="comment">留言：</label>
<textarea 
  id="comment" 
  name="user_comment"
  rows="5" 
  cols="40"
  placeholder="请输入您的意见..."
  maxlength="500"
></textarea>

7.特殊字符

有些特殊字符在html中是不能直接表示的。例如：

空格：&nbsp
小于号：&lt
大于号：&gt
按位与：&amp

如果我们直接在html中打印空格：

可以看到直接写8个空格无法判定。因此我们使用上面的代替符号：

html 复制代码

 <p>这里有8个空格&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp空格</p><br>

再次运行就能看到打出了8个空格了。

其他特殊字符以此类推。