HTML学习笔记（二）-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML学习笔记（二）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、HTML表单

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

表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如: 文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox)等

在 HTML 中创建表单需要用到<from>标签，具体语法如下所示：

<form action="URL" method="GET|POST">
    表单中的其它标签
</form>

action 属性用来指明将表单提交到哪个页面，method 属性表示使用哪个方式提交数据，包括GET 和POST两种方式

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text" placeholder="请输入用户名"><br>
        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password" placeholder="请输入密码"><br>
        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <!-- selected属性的作用是默认选中 -->
            <option value="1" selected>男</option>
            <option value="2">女</option>
        </select>
        <br>
        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">音乐
        <input type="checkbox" name="hobby" value="2">电影
        <input type="checkbox" name="hobby" value="3">阅读
        <input type="checkbox" name="hobby" value="4">运动
        <br>
        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">初中
        <input type="radio" name="education" value="3">高中
        <input type="radio" name="education" value="4">大专
        <!-- check属性的作用是默认选中 -->
        <input type="radio" name="education" value="5" checked>本科
        <input type="radio" name="education" value="6">研究生
        <br>
        <!-- 文本域 -->
        <!-- cols属性规定文本域内可见宽度,rows属性规定文本域内可见行数 -->
        <textarea cols="30" rows="10">填写对你印象最深的一件事</textarea>
        <br>
        <!-- 按钮 -->
        <label>补充个人简历文件：</label>
        <input type="file" value="补充个人简历文件"><br>
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>

运行结果如下所示:

html输入框,笔记,html,前端,css

填写好用户数据，点击“提交”按钮，即可使用POST方式将数据提交到当前目录下的userinfo.php 页面，在服务器端通过 PHP 代码可以接收提交的数据

<label>标签用于为表单中的各个控件定义标题

<input>标签用于定义输入框或按钮，通过type属性展示不同形式的输入框或者按钮

html输入框,笔记,html,前端,css
<select>标签用于定义下拉列表，<option>标签用于定义下拉列表中的选项，<textarea>标签用于定义文本域

文章来源地址https://www.toymoban.com/news/detail-769885.html

二、HTML表单标签

（一） form标签

在浏览 Web 时，用户的交互主要是通过点击链接来浏览网页。但有时我们也需要用户通过输入来提供一些信息。比如：

注册并登录网站
输入个人信息（姓名，地址，信用卡详细信息……）
过滤内容（使用下拉菜单，复选框……）
进行搜索
上传文件
…

为了满足这些需求，HTML 提供了交互式表单控件：

文本输入（一行或多行）
单选按钮
复选框
下拉菜单
上传小部件
提交按钮
…

form 标签

现在让我们来完成下面这个表单的开发

html输入框,笔记,html,前端,css

可以看到，在这个注册表单里都是输入框、按钮等表单元素，对于这些表单控件，我们需要用一个块状元素<form>把它们包起来，属于同一个表单的表单控件要包含在同一个块状元素<form>里。

这个标签有两个属性需要我们了解，action和method：

action：一个处理此表单信息的程序所在的 URL，所述表格信息将在表单提交时被发送到定义的地址；
method：它的值可以是 GET 或 POST，用来规定如何发送表单信息；

通常，表单信息被发送到 服务器 。如何处理这些数据不是我们本次课的内容，我们以后会再讲到。

现在让我们先写下一个<form>标签，在网页上定义一个表单区域：

<!-- <form>是块状标签，要注意：<form>标签不能嵌套<form>标签 -->
<form action="">
  <!-- 这里会有一些表单控件 -->
</form>

（二）单行文本输入框

首先我们来写 昵称输入框。

单行文本输入框：

<!-- action=""则表单信息将提交到当前页面 -->
<form action="">
  <input type="text" />
</form>

显示效果：

html输入框,笔记,html,前端,css

特别注意：需要我们特别关注的是，input不但是一个内联元素，还是一个只有开始标签，没有结束标签的内联元素，我们可以认为它是一个“自闭”元素。你还记得别的自闭元素吗？

1. 占位文本 “placeholder”

我们可以看到，注册表单（上图）中的昵称输入框里有“昵称”两个字，而我们的单行文本输入框中并没有任何文字，这个文字在点击输入框并输入内容后会消失，这是 占位文本，通常用来提示用户需要输入什么。可以通过标签属性 “placeholder” 来实现的。

<input type="text" placeholder="昵称" />

显示效果：

html输入框,笔记,html,前端,css

2. 输入框名字 “name”

为了区别于其他的<input>，我们需要给昵称输入框加上标签属性name，作为<input>的名字，在提交表单数据时就不会和其他<input>搞混了：

<input type="text" placeholder="昵称" name="nick" />

显示效果：

html输入框,笔记,html,前端,css

3. 输入框的值 “value”

如果希望在输入框中预填写用户的昵称，可以用标签属性value：

<input type="text" placeholder="昵称" name="nick" value="小明" />

显示效果：

html输入框,笔记,html,前端,css

4. 不可修改的输入框 “readonly”和“disabled”

在一些特殊情况中，我们会给用户分配昵称，这个时候并不希望用户可以自行修改，我们可以这么做：

<input type="text" placeholder="昵称" name="nick" value="小明" readonly />

显示效果：

把输入框变成只读输入框！这样用户就不能自己修改预填写的内容啦。

除了用”readonly”这个属性，我们还可以用”disabled”，这个属性也能使用户无法更改输入框中的内容。

<input type="text" placeholder="昵称" name="nick" value="小明" disabled />

效果显示：

html输入框,笔记,html,前端,css

但是这两个是有一定区别的：

属性	disabled	readonly
对象	所有表单元素	input 和 textarea
作用	使文本框不能输入，当表单以 POST 或 GET 的方式提交时，使用了 disabled 的元素的值不会被传递出去	仅使文本框不能输入
外观 *	使文本框变灰	外观没有变化

外观 * ：在不同浏览器中输入框的外观可能会有区别，因此“readonly”和“disabled” 这两种输入框在外观上的差别可能与上表所述有所不同。

（三）多行文本输入框和密码输入框

接下来我们写个性签名和密码输入框。

多行输入框

个性签名是个多行输入框。当多行文本输入框中输入的内容超过一行的长度时，它会自动换行，而单行文本输入框则不会换行。

这里我们会用到textarea标签来写多行输入框。

<!-- name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<textarea
  name="sign"
  rows="5"
  cols="30"
  placeholder="请输入个性签名"
></textarea>

html输入框,笔记,html,前端,css

其中rows和cols分别表示行数（高度）和文本域的可视宽度： rows：行数（高度）； cols：文本域的可视宽度；

这两个属性可写可不写，<textarea></textarea>就能表示一个多行输入框，

html输入框,笔记,html,前端,css

在多行文本框右下角我们可以看到一排斜线：

在斜线处按住鼠标左键拖动，可以改变输入框的大小。

密码输入框

密码输入框和昵称输入框有点区别，用户输入的内容将会以 黑圆点 的形式显示。

如何做到输入内容不直接显示呢？非常简单，我们只需要把表单标签<input>中的标签属性type="text"改成type="password"就可以啦：

<!-- type属性表示表单元素的类型，name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<input type="password" name="password" placeholder="密码" />

（四）单选框和复选框

性别单选题（单选框）

在这里我们只考虑了男女两种性别，并默认用户只有一种性别。就像做单选题一样，用户只能选择男性或者女性。

这里我们得使用 单选框：

<!-- type属性表示表单元素的类型，name属性表示表单元素的名称，value属性表示表单元素的值 -->
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />

html输入框,笔记,html,前端,css

所谓单选框，其实只是把控件类型type="text"改成了type="radio"。 大部分 表单元素都是通过改变标签属性type的值来实现的。

* 属于同一道“单选题”的每个单选按钮，应该拥有相同的name属性值。

我们用 value=“male” 表示男性，用 value=“female” 表示女性，但是大家会发现，在上面的网页显示效果中并没有这两个单词出现，其实，这两个单词是表单数据提交时提交的内容。

那么我们如何把选项的内容写到网页上呢？很简单，直接在input标签后加内容就可以啦：

<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女

html输入框,笔记,html,前端,css

现在，当用户点击文字前面的小圆点时，就会选中对应的性别啦，点击试试吧。

但是，这样点击的范围有点小，如果点击文字也能选中对应的性别就更好了。为了达到这个目的，我们常常会把单选框和标签<label>配合使用：

<label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>

html输入框,笔记,html,前端,css

现在点击文字也能选中对应的性别！试试看吧！

另一种写法：
<input id="male" type="radio" name="gender" value="male" />
<label for="male">男</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女</label>
我们给单选框<input>加了一个属性id="male"，给<label>标签也加了一个属性for="male"。这样，两者之间就产生了一一对应的关系。

兴趣多选题（复选框）

用户可能对很多领域感兴趣，所以在兴趣的选择上我们要用复选框。

html输入框,笔记,html,前端,css

复选框的使用就像一道多选题，用户可以选择多个选项。除此之外，复选框和单选框很像，它的类型是checkbox：

<input type="checkbox" />

html输入框,笔记,html,前端,css

你会在页面上看到一个小方框，点击它，可以看到它被选中了，再次点击，选中会被取消。

为了写好我们的兴趣复选框，我们需要在上面这个简单的复选框的基础上，给它们加上文字（配合<label>标签）、name 属性和 value 值：

<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>

html输入框,笔记,html,前端,css

* 属于同一道“多选题”的每个复选框元素，应该拥有相同的name属性值。

需要注意的是：复选框是只有 2 种状态的表单控件：已选中或未选中。在只有一个复选框的情况下，它允许用户对某事说“是”或“否”，比如同意或不同意某个条款。而只有一个单选框的情况下，用户一旦选择了这个单选框，就不能再取消选择了，除非他刷新了网页～

现在我们把下图这个表单中的性别输入框和兴趣多选框加上（样式可能和下面这个表单有些不同，大家先不用纠结这一点，样式的问题等我们学习样式之后再讨论）。

（五）选项菜单

对于职业的选择，我们给用户提供了几个固定的选项：“公司职员”、“自由职业者”、“学生”、“其他”，当然，实际情况可能会产生更多的选项。因为选项有点多，所以我们不采用单选框，而是用到新的标签<select>和<option>，选项菜单。

html输入框,笔记,html,前端,css

每个选项用<option>标签表示，一组选项用<select>包裹：

<select name="career">
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>

显示效果：

html输入框,笔记,html,前端,css

需要注意的是，这是一个单选菜单，如果用户选择了“学生”，那么提交的数据将会是：career:"student"

发现了吗？提交的内容并不是“学生”，而是<option>标签的标签属性value的值。所以每个 option 的 value 值要互不相同。

如果我们想要的是一个多选菜单，该怎么办呢？

很简单，给<select>标签添加 multiple 属性，就可以通过按住 Ctrl（或 ⌘）并单击选项来选中多个选项啦：

<select name="career" multiple>
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>

html输入框,笔记,html,前端,css

点击试试看，这次可以选中多个选项了。

现在我们把下图这个表单中的职业选择菜单加上。

（六）按钮

最后，让我们来完成这个表单的注册按钮。

我们将使用 html 提供的<button>标签：

<button>注册</button>

显示效果：注册

因为<button>标签有闭合标签，在开始标签和结束标签之间，我们可以放上文字、图片、图标等等。

这个按钮放在 form 中会在点击的时候自动提交表单数据，但是在 button 提交表单数据这一点上是有浏览器兼容性问题的，一般还是需要加上 type=“submit”来确保数据的提交：

<button type="submit">注册</button>

显示效果：注册

现在我们把下图这个表单中的职业选择菜单加上

到这里，我们就完成了一个简单的注册表单。

完整的注册表单：

<form action="">
  <input type="text" name="name" placeholder="请输入昵称" />
  <textarea
    name="sign"
    rows="5"
    cols="30"
    placeholder="请输入个性签名"
  ></textarea>
  <input name="password" type="password" placeholder="请输入密码" />

  <label> <input type="radio" name="gender" value="male" />男 </label>
  <label> <input type="radio" name="gender" value="female" />女 </label>

  <label> <input type="checkbox" name="interest" value="coding" />编程 </label>
  <label> <input type="checkbox" name="interest" value="other" />其他 </label>

  <select name="career">
    <option value="default">请选择职业</option>
    <option value="staff">公司职员</option>
    <option value="freelancer">自由职业者</option>
    <option value="student">学生</option>
    <option value="other">其他</option>
  </select>

  <button type="submit">注册</button>
</form>