【H2O2|全栈】关于HTML（5）HTML基础（四）

HTML基础知识

前言

准备工作

标签的具体分类（四）

本文中的标签在什么位置中使用？

表单（一）

表单标签

输入域标签

预告和回顾

后话

前言

本系列博客将分享HTML相关知识点。

这一期博客，我们来讲解表单相关的标签。

注意，本期表单中的大部分属性仅限于HTML4，如果想要了解更多关于HTML5中常用的表单功能，可以期待未来的HTML进阶篇的博客。

不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘻嘻）。

准备工作

软件：【参考版本】Visual Studio Code，有道云笔记

*关于有道云笔记的使用可以看我专栏的Markdown文档有关文章*

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

标签的具体分类（四）

本文中的标签在什么位置中使用？

本文中我们需要掌握的，是写在主体标签（body）中的各种标签。

表单（一）

在日常生活中，我们经常会遇到一些在线信息的填写的场景，比如网站注册时的完善个人信息。这里面就会涉及到表单的使用。

表单标签

表单的格式和表格类似，最外层的标签为<form></form>，直译为表单。

表单中常见的属性有：

属性名	作用
action	设置表单提交位置的URL
method	设置表单提交的方式

action中填写表单提交到的位置，在表单提交后，将会跳转至该位置。

method的值有三种，常见的是get和post。使用get方式提交时，提交的内容会直接显示在网页URL后，因此是不安全的。而post方式提交的表单会经过加密处理，所以，就安全性而言最好使用post方式提交表单。

比如，向百度网页提交一个示例表单，使用get方式，代码如下：

<form action="https://www.baidu.com" method="get">
        密码：<input type="password" name="pwd" placeholder="请输入密码">
        <input type="submit">
    </form>

这个表单的功能是提交一个密码。密码框的内容按道理是需要保密的，在我们看来是这个效果：

然而当我们点击提交，自动跳转到百度首页后，在浏览器URL里可以发现有表单的内容：

而当我们使用post方式时，同样的位置将会显示：

这说明我们的信息被加密了，已经不能通过URL直接找到了。

输入域标签

表单中的标签input，用于定义表单与用户间的交互控件，如输入框，单选，复选框，下拉列表，按钮等等。

input标签是一个单标签，不能包裹其他的内容，但是可以把内容写在它的附近作为提示词。它也是一个行内标签，不自带换行功能。

input标签的常见的属性有：

属性名	值含义
type	定义input元素类型
name	定义元素名称
src	特定type类型使用，URL
alt	特定type类型使用，加载失败显示文字
width	特定type类型使用，宽
height	特定type类型使用，高
size	规定字符数量，以此设定input区域宽度
maxlength	允许最大字符数
placeholder	【HTML5新增】特定type类型使用，浅色提示文本
disabled	禁用，可不填属性
readonly	特定type类型使用，只读，可不填属性
checked	特定type类型使用，默认选中，可不填属性

对于type属性，不同的值可以改变输入域的类型：

属性值	输入域类型
text	（默认）定义单行文本（默认宽度20字符）
password	定义密码按钮（字段中的字符会被覆盖）
radio	定义单选按钮
checkbox	定义复选框
button	定义可点击的按钮
value	指定input元素的值
submit	定义提交按钮默认value为提交默认有提交功能
reset	定义重置按钮默认value为重置
file	定义文件选择字段和“选择...”，上传文件
image	定义图像为提交按钮默认有提交功能
hidden	定义隐藏输入字段

案例

可以看到，input标签相关的内容非常多，一时半会儿不好记。

所以，不妨就制作一个简单的个人信息清单，以此来辅助理解记忆吧。

*此案例不调整CSS样式*

在开始之前，预设表单action为百度首页，表单提交method为post。

首先是设置昵称，用到的type属性是text。使用如下代码：

<form action="https://www.baidu.com" method="post">
        用户昵称：<input type="text" name="user" placeholder="输入昵称">
    </form>

在浏览器中效果如下：

name属性的值相当于表单提交元素在文件中的名称，在表单中代表当前元素，和键值对中的键概念有些相似。

placeholder是显示在输入域中的浅色文本，在输入内容后自动消失：

设置完昵称之后，就可以设置头像。涉及到图片文件的上传，即file的使用。添加如下代码（不要忘记换行）：

设置头像：<input type="file" name="avatar">

在浏览器中，就可以看到如下的效果:

点击选择文件，就可以在资源管理器中选择文件进行上传了：

对于用户来说，用户ID往往是唯一且不可变更的，就比如CSDN的ID，一旦确定就是不可更改的。

所以，这里要在text的基础上，加上disabled属性，表明当前输入域不可更改。添加的代码如下：

用户ID：<input type="text" name="uid" value="123456" readonly>

其中，value是预设定的值，如果不设置该属性，value值将取用输入域中输入的值。当然，即使设置了该属性的值，也可以修改这个值（相当于预输入可更改文本）。效果如下：

光标不能选中修改ID框中的内容。

接下来是设置（输入）密码，由于密码应当是保密的，所以密码框password在样式上使用小黑点代替输入的内容。添加的代码如下：

设置密码：<input type="password" name="pwd" placeholder="输入密码">

显示的效果如下：

接下来是设置用户的性别，假设性别只能选择一种吧，就会用到radio。设置四个选项用于性别的设置，代码如下：

选择性别：<input type="radio" name="sex">♂ <input type="radio" name="sex">♀ <input type="radio" name="sex">其他 <input type="radio" name="sex" checked>保密

在网页中显示的效果如下：

注意，保密这个选项设置了checked属性，可以让这个选项被默认选择上。

接下来是设置感兴趣的内容，通常来说，用户的爱好可以是单一的，也可以是多样的，于是就涉及到checkbox的使用。添加以下代码：

选择感兴趣的标签：<input type="checkbox" name="hoppy">PS
        <input type="checkbox" name="hoppy">Markdown
        <input type="checkbox" name="hoppy">SVN
        <input type="checkbox" name="hoppy">HTML

在网页中显示的效果如下：

在完成个人信息的填写之后，如果填写有误，则涉及到reset的使用，即重置。添加以下代码：

<input type="reset" name="reset" value="重置">

如果不用重置，则直接选择提交（submit）。添加以下代码：

<input type="submit" name="submit" value="提交">

上面这两个属性，都是按钮的效果。现在，我们暂时不能给普通按钮button设置鼠标单击（onlick）行为，但是也可以先加一个普通按钮在这：

<input type="button" name="btn" value="关注">

以上三个按钮放到一起，运行的效果如下：

当然，如果不喜欢这种按钮的默认样式，除了可以使用CSS以外，还可以有另一种思路——将图片设置为按钮，默认为提交按钮。

比如，添加下面这段代码，涉及到图片按钮的src，alt（可为空），width和height，就把我的头像做成一个按钮吧——

<input type="image" src="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1" alt="H2O2的头" width="100px" height="100px">

在网页中显示的效果如下：

最后剩下的size属性，maxlength属性就不展示效果了。

前者可以设置输入域的宽度，设置的是数量，比如设置20就是20个字符的宽度；后者可以设置输入的最大字符数量，比如可以设置密码最长不能超过8位。

还有一个hidden（隐藏），我会放到JS的相关内容中去讲，包括readonly，disabled等，其实都是可以利用JS设置成在某种情况下给出该属性。

有关输入域的内容暂时就讲这些，其他的HTML5中新增的内容在进阶篇里面会讲。

个人信息清单的表单全代码在这里，有需要的可以自行复制：

<form action="https://www.baidu.com" method="post">
        用户昵称：<input type="text" placeholder="输入昵称"><br /><br />
        设置头像：<input type="file" name="avatar"><br /><br />
        用户ID：<input type="text" name="uid" value="123456" disabled><br /><br />
        设置密码：<input type="password" name="pwd" placeholder="输入密码"><br /><br />
        选择性别：<input type="radio" name="sex">♂ 
        <input type="radio" name="sex">♀ 
        <input type="radio" name="sex">其他 
        <input type="radio" name="sex" checked>保密<br /><br />
        选择感兴趣的标签：<input type="checkbox" name="hoppy">PS
        <input type="checkbox" name="hoppy">Markdown
        <input type="checkbox" name="hoppy">SVN
        <input type="checkbox" name="hoppy">HTML<br /><br />
        <input type="reset" name="reset" value="重置">&emsp13;
        <input type="submit" name="submit" value="提交">&emsp13;
        <input type="button" name="btn" value="关注"><br /><br />
        <input type="image" src="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1" alt="H2O2的头" width="100px" height="100px">
    </form>