HTML 基础

表单标签(掌握)

目的是为了收集用户信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

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

表单控件：

​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

​ 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

​ 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

属性 说明

type input元素类型

name input 元素的名称

value input 元素的值

size input 元素的宽度

readonly 是否只读

maxlength 输入字符的最大长度

disabled 是否禁用

文本框：

在表单中，文本框用来让用户输入字母、数字等等，如用户的姓名，地址等。

代码格式如下：
<input type=“text” name="…" size="…" maxlength="…" value="…"/>

属性解释：

type=”text”：定义单行文本输入框；

name属性：定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性：定义文本框的宽度，单位是单个字符宽度；

value属性：定义文本框的初始值。

密码框：

是一种特殊的文本域，用于输入密码。

代码格式如下：
<input type=“password” name="…" size="…" maxlength="…" value="…"/>

属性解释：

type=”password”定义密码框；

name属性：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性：定义密码框的宽度，单位是单个字符宽度；

value属性：定义文本框的初始值。

隐藏域：

是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式如下：
<input type=“hidden” name="…" value="…"/>

属性解释：

type=”hidden”：定义隐藏域；

name属性：定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

value属性：定义文本框的初始值。

单选按钮：

当需要用户从有限个选项中选择一个时，使用单选按钮。比如我们在注册的时候选择体重。

代码格式如下：
<input type=“radio” name="…" value="…"/>

属性解释：

type=”radio”定义单选框；

name属性：定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须同一个名称；

value属性：定义单选框的值，同一组中，他们的域值必须是不同的。

复选框：

允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个独一的名称。

代码格式如下：
<input type=“checkbox” name="…" value="…"/>

属性解释：

type=”checkbox”定义复选框；

name属性：定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

value属性：定义复选框的值。

{

type: 以下为type可能要取的值：
1.1 text 文本框 输入内容
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据
表示同一组中只能选中一个( checked =“checked” 表示选中)
1.4 checkbox 表示多选 ，name必须一致，
表示同一组中可以选多个，返回值是个数组( checked =“checked” 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.9 image 图片提交按钮
以上所有input的属性： width 设置宽度，height 设置高度 border 设置边框
1.10 button 普通按钮
1.11 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)

name属性：表单元素名字，只有name属性才能提交给服务器。

}

文件上传框：

代码格式如下：
<input type=“file’ name=”…"

注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明：multipart 控件是否上传多文件

属性解释：

type=”file”：定义文件上传框；

name属性：定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

HTML5的表单所有type类型

button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 “浏览…” 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。
radio	定义单选按钮。
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

label标签(理解)

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

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for=“male”>Male</label>
<input type=“radio” name=“sex” id=“male” value=“male”>

---

Male

form标签（表单域）

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

\<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
\</form>

• 1
• 2
• 3

常用属性：

1. Action
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

   （表示动作，值为服务器的地址，把表单的数据提交到该地址上处理）

2. method
   用于设置表单数据的提交方式，其取值为get或post。

3. name
   用于指定表单的名称，以区分同一个页面中的多个表单。

4.enctype:

表示是表单提交的类型**

注意： 每个表单都应该有自己表单域。