表单的创建

表单--用来收集信息。比如注册，登录，发送评论反馈，购买商品等等
所有HTML表单都以一个<form>元素开始
    <form action="save.php" method="post">

    </form>
action属性表示表单要提交到后台程序的网址
method属性表示表单提交的方式，有get或post

基本控件

1）基本控件1

单行文本框：

使用type属性值被设置为text的元素可以创建单行文本框，他是一个单标签
<input type="text" value="123">
** value属性** 表示已经填写好的值
![V62{$D0@BKKA3A6)R0_G)]D.png](p1-juejin.byteimg.com/tos-cn-i-k3…)

** placeholder属性**表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值
<input type="text" placeholder="请输入姓名">
![O5~@B@AS2EB0NBIDTFB@~K.png

** disabled属性** 表示用户不能与元素交互，即“锁死”
XFJ9%GWNH[{W~2U()TXP6.png
** 单选按钮：** 使用type属性值被设置为radio的<input>元素可以创建单选按钮
<input type="radio">

 互斥的单选按钮以该设置他们的name为相同值
 单选按钮要有value属性值，向服务器提交的就是value值
 单选按钮如果加上了checked属性，表示默认被选中

**label标签：**用来将文字和单选按钮进行绑定，用户单击文字的时候也是为点击了单选按钮
在HTML4时代，label标签是通过for属性和单选按钮的id属性进行绑定的
<input type="radio" id="nan">
<label for="nan">男</label>

复选框：

使用type属性值被设置为checkbox的<input>元素可以创建复选框
<input type="checkbox">

同组复选框应该设置它们的name为相同值
复选框要有value属性值，向服务器提交的就是value值

2）基本控件2

密码框：

使用type属性值被设置为password的<input>元素可以创建密码框
下拉菜单：<select>标签表示下拉菜单，<option>是它内部的选项
多行文本框：<textarea></textarea>表示多行文本框
rows和cols属性，用于定义多行文本框的行数和列数
<p>
选择你最喜欢的语言:
<select>
<option value="Java">Java</option>
<option value="PHP">php</option>
<option value="JavaScript">JavaScript</option>
<option value="c++">c++</option>
</select>
</p> <p>
留言：
<textarea name="" id="" cols="100" rows="10"></textarea>
</p>

![ESO)RQ`G})C]U_JEQR3CN83.png](p6-juejin.byteimg.com/tos-cn-i-k3…)

三种按钮：
表单中常见的三种按钮，也都是input标签，type属性值不同组复选框应该设置它们的name为相同值
button--普通按钮，可以简写为<button></button>
submit--提交按钮
reset--重置按钮

input类型总结：

（ type属性值--控件：）
text--单行文本框
radio--单选按钮
checkbox--多选按钮
password--密码框
button--普通按扭
submit--提交按钮
reset--重置按钮

3）HTML5中新增的表单控件

更丰富的input种类：（ type属性值--控件：）
color--颜色选择控件
date，time--日期，时间选择控件
email--电子邮件输入控件
file--文件选择控件
number--数字输入控件
range--拖拽条
search--搜索框
url--网址输入控件

$~8_0V{T%7FBAJAY%QT0)OK0.png$

<datalist></datalist>控件：
<datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应

4-表单标签