图片.jpg

表单

提供给用户输入某种信息的格式，并且可以提交到后台处理这些（个）数据

表单的形式

<form action="提交到哪个地址" method="提交方式（get、post）" >
.
input表单
...
<input type="submit" value="提交"/>
.
</form>

提供给用户的输入标签一定要放在form标签中
注：如果需要发送一些数据到后端 但是不想让用户看见 那么 设置type="hidden" 隐藏 并且设置 name="xx" value="yy" 数据提交

input表单(type类型的设置)

如我们常见的用户登录中的用户名和密码这两个输入框就称作表单
但是还有其他用于提供给用户输入信息的格式也称作表单

表单数据传到后台是需要对传到后台的数据进行特定的指定，就像每个人都有个自己的名字，才能区分每个人，同理，传到后台的数据也需要对其进行取名字，这个是前端的事情，所以，注：每个表单需要一个name值

第一种：不手动设置value值

用户输入的值就会被计算机认为是传到后台的value值

1.text

文本文字的输入框，没有换行

<label for="usrename">用户名：</label>
<input type="text" name="text1" id="username"/>

图片.png

注：
（1）label: for对应id的值 是当鼠标点击用户名这几个文字是，可以定位到输入框，聚焦到文本输入框，如果没有label 没有for对应id的值，是不会有这种效果的

（2）

图片.png

2.password 密码输入框

type="password"

3.关于日期和时间

1)date 非手动填写日期（年月日）

<input type="date" name="date" />

效果：

图片.png

2).datetime 手动填写日期和时间（UTC时间）

type="datetime"

<input type="datetime" name="time"/>

图片.png

3)datetime-local 手动填写日期和时间（无时区）

<input type="datetime-local" name="time"/>

图片.png

4) time 非手动填写时间（时分）

<input type="time" name="time"/>

图片.png

5)week非手动输入年和周

<input type="week" name="week-year"/>

图片.png

6)month 非手动输入年和月

<input type="month" name="month"/>

图片.png

4.email手动输入邮箱

类似一般的输入框

图片.png

5.number 非手动输入数字

规定数字输入范围（有输入范围的控制）：

<input type="number" name="quantity" min="0" max="5"/>

图片.png

不规定范围（没有输入范围的控制）：

<input type="number" name="quantity"/><br />

图片.png

6.range范围

有范围控制（可以有没有范围控制的设置，同数字表单）：

0<input type="range" name="points" min="0" max="10" />10

效果：

图片.png

7.search搜索字段（类似于站点搜索或google搜索）

<input type="search" name="search" />

图片.png

8.tel电话号码字段

<input type="tel" name="usertel" />

图片.png

9.url网址输入

<input type="url" name="mypage" />

图片.png

第二种：手动设置value值

手动为每个选项设置它的value值，这样在http传输的时候，才会有值的传输到后台

1. checkbox 复选框

注意：复选框的每个选择项需要设置不同的名字name

爱好:
<input type="checkbox" name="hobby1" value="dota"/>dota
<input type="checkbox" name="hobby2" value="travel" />旅游
<input type="checkbox" name="hobby3" value="animal" />宠物

效果：

图片.png

2.radio 单选框

注意:单选框的每个选项需要设置相同的名字name,如果需要分为几组，就设置几组名字

性别:
<input type="radio" name="sex" value="famle" />男
<input type="radio" name="sex" value="male" />女
效果图：

图片.png

3. select-option下拉列表

我的car:<select name="select1">
<option value="L">大车</option>
<option value="M">中车</option>
<option value="s">小车</option>
</select>

图片.png

第三种：其他

1.color 颜色

选择颜色

选择您喜欢的颜色：
<input type="color" name="color" />

图片.png