HTML表单

一，表单

表单在web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个html文档内，当用户填写完信息后做提交（submit）操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的PHP或者ASP等处理程序处理后，再将用户所需的信息传送回客户端的浏览器上，这样网页就具有了交互性，这里我们只讲HTML标志来设计表单。

表单标签：<form></form>

1,表单是由窗体和控件组成的，一个表单应该包含用户填写信息的输入框，提交和按钮等，这邪恶输入框，按钮叫做控件，表单更像是一个容器，它能容纳各种各样的控件。

2，form表单简单的说就是采集用户信息，form标签内可以跟许多的input输入框

3，表单标签的格式：

<form action="url" method=get/post/ name="myfrom">
     
</form>

3,form表单的属性

name名字：给表格起名字，告诉后台这个表格叫什么，如：message信息表

method提交方式：分为get和post提交方式

a：get提交方式会在地址栏出现用户信息，不安全

b：post提交方式不会再地址栏上出现用户信息，信息不会被看到，多以post请求相对于get请求更安全

二，表单控件<input>都是在form标签内

1,在HTML语言中，标签<input>输入框具有重要的地位，它能将浏览器中的控件加载到html文档中，该标记是个单标签，没有结束标签

2，<input type=" "/>标志用来定义一个用户输入区，用户可在其中输入信息，此标签必须放在<form></form>标签之间。

3，<input type=" "/>标签中共提供了几种类型的输入区域，具体是哪一种类型由type属性来决定。

《注意：H5中<input>可以不放入<from>标签之间，利用属性指定某一个form 》

<1>,文本框

<input type="text" name=" " size=" " maxlength=" " value=" " />

a，name:定义控件名称，如账户为user,密码为password，input内需加上name，更好

b，size：指定控件的宽度（尺寸），表示该文本输入框允许用户输入的最大字符数

c，maxlength：表示该文本输入框允许用户输入的最大字符数

d，value：默认值，存在input框内提示的文字（但是并没有隐藏，会影响用户输入）

e，placeholder：提示文字，在输入框input内提示文字，和value相比，placeholder效果更好

f，disabled禁止：禁止使用在单选框或者多选框内都可以使用，输入框变成灰色，不能输入

g，readonly只读：只能读取，不能书写，选框不变色，但是获取不了光标，只能读

<2>,密码框

<input type="password"/>

a，name 定于控件的名称，给输入框起名字，和文本框一致，密码框名称：password

b，value值：在input框内显示的文字（没有隐藏，会影响用户的输入）

c，placeholder提示文字：在input框内显示的文字，（文字会被半隐藏，不会影响用户输入，效果比value更好）

d，size尺寸：指定输入框内的宽度，表示该文本框所能显示的最大字符数

e，maxlength最大长度：设置输入框内的输入数字的最大长度

f，disabled禁止：禁止使用在单选框或者多选框内都可以使用，输入框变成灰色，本能输入

g，readonly只读：只能读取，不能书写，选框不变色，但是获取不了光标，只能读取

<3>单选框

<input type="radio"/>

a，radio单选框：只能进行单选的选项，例如：sex性别

b，value值：在单选框内显示的文字，可以随意更改，最好有意义

c，checked默认选中：就是默认选中其中写上带有checked选中属性的标签

d，关联标签：文字与框进行关联，关联上之后就可以点击文字或者都能达到一样的效果

      name名字：取名字是为了更好选择，不然会两个都选中，而且名字最好取有含义的

      关联标签：<label for=" "></labdel>

                       关联标签中的for是要和id进行配合，取的值都一样，在关联标签的中间写入的文字就是和单选框进行关联的文字

<form>
    <p>
       <h4>单选框</h4>
       <input type="radio" id="nan" name="sex"/><label for="nan">男</input>
       <input type="radio" id="nv" name="sex"/><label for="nv">女</input>
    </p>
</form>

<4>复选框（多选框）

<input type="checkbox" checked/>

a，checkbox复选框：也叫多选框，可以在网页上进行多选，也可以默认选中（全部选中页可以）

b，checked默认选中：就是默认选中其中写上带有checked选中属性标签

c，value值：在单选框内显示的文字，可以随意更改，最好有意义

d，关联标签：文字与框进行关联，关联上之后就可以点击文字或者都能达到一样的效果《单选框，多选框内都可以使用》

      name名字：取名字是为了更好选择，不然会两个都选中，而且名字最好取有含义的

      关联标签：<label for=" "></labdel>

                       关联标签中的for是要和id进行配合，取的值都一样，在关联标签的中间写入的文字就是和单选框进行关联的文字

<5>按钮

1，提交按钮

     <input type="submit" value="你确定吗"/>

     a，submit提交按钮：能发送我们的数据到服务器，服务器在发送给数据库进行保存，还会刷新页面

                                        提交按钮会刷新我们的也买你，会将我们输入的资料在地址栏上显示，但是在input框内必须加上name属性，不然地址栏上不会出现输入的信息

     b，value值：能改变提示框的文字

2，普通按钮

    <input type="button" value="按钮"/>

     a，button普通的按钮，没有文字，需要使用value来取名，只是一个普通的按钮

     b，value值：能改变提示框的文字

3，重置按钮

     <input type="reset"/>

     a，reset重置按钮：点击重置按钮，会恢复默认页面

     b，不需要value来实现框的文字，重置按钮自带文字

4，上传文件按钮

     <input type="file"/>

     a，file文件：文件按钮可以进行文件选中，点击提交按钮之后上传文件

     b，不需要value来实现框的文字，文件按钮按钮自带文字

5，隐藏按钮

     <input type="hidden" value="不想被看见"/>

     a，hidden隐藏域：被隐藏得按钮，在网页上看不见

     b，以上value得值只是在标签内提示此按钮为隐藏按钮，不会在页面上出现

<6>下拉列表框

1，<select></select>标签对用来创建一个菜单下拉列表框。

      此标志对用于<form></form>标签之间，

      <select>标签具有multiple，name，size属性。

<form>
    <p>
       <select size="1" multiple><!--select选择框，multiple:允许多选-->
            <option value="0" selected>北京</option><!--selected:默认选中-->
            <option value="0">上海</option>
            <option value="0">浙江</option>
            <option value="0">江西</option>
       </select>
    </p>
</form>

a，select选择框：可以进行选择的下拉列表框

b，multiple允许多选：此属性时让下拉列表框中的选项是可以多选

c，name名字：设置此框的名字

d，size尺寸：此属性是用来设置列表的高度，值为1 时，若没有设置multiple属性，显示的将是一个弹出式的列表框

（1）：<option>，此标签为选择标签，用来指定列表中的一个选项，它放在<select></select>标签之间，option标签具有selected和values属性

     a，selected默认选中，适用在option选项中，《checked也是默认选中，但是checked是适用在input框内》

     b，value属性是用来给<option>指定的那一个赋值，这个值是要传送到服务器上的，服务器正是调用<select>区域的名字value值属性来获取该区域选中的数据项的。

<7>多行文本框

<textarea></textarea>用来创建一个可以输入多行的文本框此标签用于<form></form>标签之间。

<textarea cols="30" rows=50></textarea>

a，textarea文本框：多行文本框，框内输入的文字可以进行换行

b，cols行：此属性是在多行文本框内设置文字的行数

c，rows列：此属性是在多行文本框内设置文字的列数，即高度

<8>label标签

1，<label for="控制id名称">用户名：</label>

2，<input type="text" id="id"名称/>