3.HTML表单

一、表单基本结构

1.表单：

1.语法：

< form >
表单元素（文本域、单选框、复选框、按钮、列表…）
< /form >

ps:表单本身不可见

2.HTML表单

以下标签实现表单元素的添加：

标签	描述
< input >	表单输入标签
< selsct >	菜单和列表标签
< option >	菜单和列表项目标签
< textarea >	文字域标签
< optgroup >	菜单和列表项目标签

3.< input > 标签

1.语法：< input type=“类型属性” name=“名称” …/ >

2.适用范围：文本域、单选框、复选框、按钮…

3.无结束标签，单标签。

4.单行文本域

语法：< input type=“text” name="…" …/>

   <tr>
    <td>姓名：</td>
    <td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名" /></td>
   </tr>

5.密码域 password

1.输入的内容会被隐藏，以点*的形式出现
2.其余和文本框相同

   <tr>
    <td>密码：</td>
    <td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码" /></td>
   </tr>

6.文件域 file

1.可以直接从本地中选择上传文件。
2.不同浏览器下显示的不一样。

   <tr>
   	 <td>上传照片：</td>
         <td><input type="file" name="file"></td>
   </tr>

7.单选框 radio

1.单选框radio后面的name内容必须相同才能达到单选效果。
2.在选项后面加上checked会让起始时默认勾选该选项。
3.系统会通过value值确定你的选项是什么。

   <tr>
    	<td>性别：</td>
        <td>男<input type="radio" name="sex" value="man"/> 
            女<input type="radio" name="sex" value="woman"/>
            保密<input type="radio" name="sex" value="secret" checked/>
        </td>
   </tr>

8.复选框 checkbox

1.多选框checkbox后面的name内容最好一致，这样才能使服务器知道是同一组内容。
2.input后面加上checked会让起始时默认勾选该选项。
3.系统会通过你选择的value值确定你的选项是什么。

<tr>
  	  <td>爱好：</td>
  	  <td>读书<input type="checkbox" name="dx" value="read"/>
    	      唱歌<input type="checkbox" name="dx" value="sing"/>
              跳舞<input type="checkbox" name="dx" value="dance"/>
          </td>
 </tr>

9.按钮：button普通、reset重置、submit提交

1.value会作为名字显示 name不会修改内容。

<tr>
    <td><input type="button" value="点我" name="button"/>
        <input type="submit" value="submit" name="type"/>
        <input type="reset" value="reset" name="reset"/>
    </td>
</tr>

10.图像域image：

1.需要标明图像的位置：src=“xxx”，不单单是图片，也包括了按钮的功能。

<input type="image" type="reset" name="image_button" src="1122333.jpg" width="100px" height="50px"/>

11.隐藏域hidden

1.该内容不想被用户看到，但是想传给服务器时。
2.value中是传给服务器的值。

<input type="hidden" name="hidden" value="这是一个用户注册信息" />

12.laber for

1.label for 是为了给一个 input 输入框前边加上可点击的说明文字；
2.label 里边的 for 和 input 里边的 id 连用，是为了：正常情况下，我要在这个输入框里边输入的话，我仅仅点击前边的说明文字是没反应的，我必须要点击这个输入框才能进入可输入模式。而这里的 label for 和 id 的连用就可以实现点击输入框前边的输入文字也可以进入输入模式。（注意：有 for 就必须有一个 id）

<label for="username">姓名</label>

<input id="username"  type="text" name="username" value="Oliver"/>

4.下拉菜单和列表标签< select>

1.语法:

 < select >
 	 < option value="bj"> 北京 < /option >
 < /select >

option中value是传递给服务器的内容

2.< select > 标签属性

属性	描述
name	设置下来菜单的名称
multiple	设置可选择多个选项
size	设置列表中可见选项的数目

1.selected默认选择状态

5.分组下拉菜单和列表标签< optgroup >

1.语法：

     <select name="city" >
     	 <optgroup label="组1">
     		  <option value=" ">...</option>
     	 	  <option value=" ">...</option>
         </optgroup>
         <optgroup label="组2">
      		  <option value=" ">...</option>
       		  <option value=" ">...</option>
         </optgroup>
     </select>

6.多行文本域< textarea >

1.语法：

< textarea name=" " rows=" " cols=" ">
内容
< /textarea >

2.属性：

属性	描述
name	设置文本域的名称
placeholder	设置描述文本域预期值的简短提示
rows	设置文本区域的可见行数
cols	设置文本域内的可见宽度（值为数字，表示多少个字符宽）

<tr>
    <td>简介</td>
    <td>
     <textarea name="hi" rows="6" cols="50" placeholder="请输入个人介绍"></textarea>
    </td>
   </tr>

三、表单页面调整

1. < form >标签

1.action

action	URL	指向服务器处理程序（发送给谁）

< form action="action.php" >

xxx.php:处理数据的后台文件

2.method

method	get(默认)、post

1.get会暴露信息在URL地址后面，只作信息获取，且对发送信息的数量有限制。

本质上是一个 URL 的拼接，即把所有参数拼接到一起，形成一个新的 URL。当我们点“提交”这个按钮时

• 首先，他把这个 input 里，type=text 中的东西拿出来，得到里边的内容，里边的内容就是我们输入的文字、密码等；
• 然后，把 input 里的 name 拿出来（username/password)；
• 最后，username = 填写的名字、password = 输入的密码等，然后把它拼成一个 URL。（如：localhost:8080/abc?username=Oliver&password=123456 ）

2.post表单数据作为HTTP请求体的一部分，一般用于修改服务器上的资源，如修改密码等重要信息。对所发送信息的数量无限制。
3.区别：

• GET：直译为“得到”，那往往就是向后台要数据的时候用。比如，向后台查论文，查数据。
• POST：直译为“传递”，则往往用于向后台传数据。比如，写了一大篇文章传给后台。

3.name

name	form_name	表单名称

4.target

target	_blank、_self、_parent、_top	在何处打开action URL

1._blank空页面
2._self在当前网页
3._parent、_top是框架结构中打开

5.enctype

enctype	application/x-www-form-urlencoded(默认)、multipart(不对字符进行编码、包含控件时使用)、form-data text 、plain	在发送表单数据前如何对其进行编码

问题简答：

1.POST 和 GET 方式提交数据有什么区别？

1.get会暴露信息在URL地址后面，只作信息获取，且对发送信息的数量有限制。
2.post表单数据作为HTTP请求体的一部分，不会暴露信息，一般用于修改服务器上的资源，如修改密码等重要信息，对所发送信息的数量无限制。

2. 在 input 里，name 有什么作用？

name能在提交表单时传递它们的值，因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的。

3. label 有什么作用？如何使用？

Label中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。 1.FOR属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：
<label for="username">姓名</label>
2.ACCESSKEY属性：
功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

4. radio 如何分组？

通过name的不同来分组。name相同的为同一组。

5. placeholder 属性有什么作用？

是对用户填入规定字段的提示.

6. type=hidden 隐藏域有什么作用？举例说明。

在该内容不被用户看到，但是想传给服务器时使用。
比如：1.有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份。2.有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的。3.有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。