HTML高阶语法知识点精通（表单）

一、HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

二、环境:txt文本，Dw,Visual Studio Code,HBuilder X平台都可以使用来获取HTML的浏览样式，推荐Visual Studio Code因为里面包含许多小插件不仅可以写html，还可以写css,js,vue等前端工具。

三、具体的学习语法可以关注菜鸟教程里面有详细的教学实例。

菜鸟教程：https://www.runoob.com/html/html-basic.html

四、表单组成介绍

在HTML中、一个完整的表单通常由表单域、表单控制（也称为表单元素）和提示信息3个部分组成。

1、HTML表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">

各种表单元素控件

</form>

---

2、HTML 表单、表单域

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

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

注意：多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

---

3、文本域（Text Fields）

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

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

也可以利用maxlength="阿拉伯数字"属性来改变文本框内的字符个数。

---

4、密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

---

5、单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

注意：在这里为什么单选按钮的属性里面加上name属性，因为单选按钮在多个选择只能选择一个所以，加上name属性识别出为同一个类别，value属性可以在开始给出提示值。

---

6、复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

---

7、提交按钮(Submit Button)

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

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

注意：submit提交按钮，把表单域里面的值提交给服务器。

---

8、HTML增加用户体验<lable>

label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

实例

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

9、文件的上传与txt文本下载。

（1）在<form>文件域里面利用<input type="file" >语句可以实现文件的上传。

1. <form action="/klvchen/" method="post" enctype="multipart/form-data">

2. <p><input type="file" name="upload"></p>

3. </form>

（2）因为涉及到js部分所以选择最简单的一种压缩方法。

<a href="/static/test.txt" download="download">下载txt文件</a>

五、扩展知识点（不属于表单里面）

1、快速顶部锚点

方便节省时间快速找到用户所需要的东西。

首先找到自己的所需要的快速锚点地址使用<a href="#two" > ？</a>，

其次找到被锚点的地方使用<h3 id="two">？</h3>。

实例

<a href="#two" >第二集</a>

<h3 id="two">第二集介绍</h3>

2、自定义列表

     定义和用法

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

运行实例：

---