1、表单的基本结构
1、表单的工作原理
这里很重要的两点就是以什么样的方式来打包？还有传给服务器将由谁来进行处理？这两个问题的解决也是由form标签的属性进行设置：form标签的属性的语法：
<form action=" " method=" " name=" ">
表单元素
</form>比如说下面的这段代码：
（1）其中action.php就是我们后台处理表单数据的文件，或者是和这个网站的地址，总之在提交按钮被按下后，表单中的数据将作为参数去执行这个URL或者后台文件。
（2）使用post的方法去提交表单，原因是因为post的保密性很好，假设使用get，那么你输入的姓名，密码都会在提交的时候跳转网页的时候显示在网址的位置。下面说一下post和get的区别：get使用URL传递参数，对所发送信息数量有限制，一般用于信息的获取。post是，表单数据作为HTTP请求体的一部分，对所发送信息的数量没有限制，一般用于修改服务器上的资源。
（3）target主要掌握_blank和_self，主要就是打开新的窗口还是在自己的窗口执行的区别。
（4）enctype主要是编码方式的设置。
<form action="action.php" method="post">
表单元素
</form>2、表单的语法结构：表单使用<form>标签来包裹表单元素的。但是表单实际上在网页上不可见的，因为它只是指定了一片区域，你能看到的只有表单元素。如下所示：
<form>
表单元素全部都要写在form的标签之中
</form>3、表单元素有很多，比如说文本域、单选框、复选框、按钮、列表等。
2、<input>标签
<input type="类型属性" name="名称" ..../>
2、我们现在写一个小的例子：并在浏览器上运行看看效果
<!DOCTYPE html>
<html>
<head>
<title>基础表单</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
姓名：<input type="text" name="username">
密码：<input type="password" name="pau">
<input type="submit">
</form>
</body>
</html>
3、现在看一下单行文本域的特点
4、下面写了一个小的例子来看看input标签的所有type属性值的使用：
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699">
<form>
<table width="600px" align="center" bgcolor="#f2f2f2">
<tr>
<td>姓名:</td>
<td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" value="@163.com"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" size="25" maxlength="6" placeholder="请输入密码"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="password" size="25" maxlength="6" placeholder="请再次确认密码"></td>
</tr>
<tr>
<td>上传照片:</td>
<td><input type="file" name="file" ></td>
</tr>
<tr>
<td>性别:</td><!--显示给用户的文字是直接写在input的外面，给服务器提交的时候提交的是value的值-->
<td>男<input type="radio" name="sex" value="man" checked><!--单选框的name要一样，默认选择的后面加checked-->
女<input type="radio" name="sex" value="women">
保密<input type="radio" name="sex" value="bm">
</td>
</tr>
<tr>
<td>爱好:</td><!--多选框的name属性也要都一样，这个是为了区分一组选择和另一组选择-->
<td>读书<input type="checkbox" name="dx1" value="read" checked>
唱歌<input type="checkbox" name="dx1" value="sing">
跳舞<input type="checkbox" name="dx1" value="dance">
</td>
</tr>
<tr> <!--通过value的值来改变按钮上的文字，但是name不能改变按钮上的文字，只是取名字而已-->
<td><input type="button" value="来点我">
<input type="submit" value="submit">
<input type="reset" value="reset">
<input type="image" name="image_button" src="image/image-button.png"><!--image属性还有和submit一样的提交的功能-->
</td>
<td></td>
</tr>
<tr>
<!--隐藏域是说用户看不到，但是需要提交到服务器上的内容，就写在隐藏域中-->
<!--怎么知道这个hidden的部分被提交了呢？点击提交按钮，在网页的网址处会有变化，后面会跟上一串这样的代码：
username=&email=%40163.com&password=&password=&file=&sex=man&dx1=read&hidden=这是用户注册信息-->
<td><input type="hidden" name="hidden" value="这是用户注册信息"></td>
<td></td>
</tr>
</table>
<form>
</body>
</html>
注意的是type=“image”的src要使用你自己电脑中的一个按钮图片，代码效果如下：
3、下拉菜单和列表标签
1、下拉菜单和列表标签在前面的form元素中可以看到使用的select和option来创建和使用的。下面是语法：
<select>
<option value="">选项</option>
<option value="">选项</option>
....
</select>2、<select>和<option>的标签属性如下：
3、下面我们写一段简单的代码，将这段代码可以插入在上面的那段完整代码的中间看看效果
<tr>
<td>城市:</td>
<td>
<select name="city" ><!--如果是单项选择就不要写size和multiple属性-->
<option value="无">--请选择--</option>
<option value="北京" selected>北京</option><!--默认的是选择的背景-->
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="福建">福建</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</select>
</td>
<td>
<select name="city" size="6" multiple><!--如果想让选项以列表的形式展示，并且可以多选，就要写上size和multiple属性-->
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="福建">福建</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</select>
</td>
</tr>4、分组下拉菜单
1、在form标签中，还有可以使用<optgroup>标签来展示分组标签。它的语法结构如下：
<select>
<optgroup label="组1">
<option value="...">选项</option>
<option value="...">选项</option>
</optgroup>
<optgroup label="组1">
<option value="...">选项</option>
<option value="...">选项</option>
</optgroup>
.....
</select>2、和前面的下拉菜单是一样的，只是在列表中有了分组的形式
<select name="city" >
<option value="无">--请选择--</option>
<optgroup label="一线城市">
<option value="北京" >北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</optgroup>
<optgroup label="二线城市">
<option value="福建">福建</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</optgroup>
</select>5、多行文本域
1、多行文本域的的语法规则：
<textarea name=".." rows=".." cols=" "...>
内容
</textarea> 2、多行文本域的属性值：
3、写一段简单的代码：
<tr>
<!--注意不能同时写placehodler和<textarea>内容</textarea>之间的内容-->
<td>简介:</td>
<td><textarea name="jj" placeholder="请书写不少于200字的自我介绍 " rows="5" cols="50"></textarea></td>
</tr>6、关于表单的综合实例
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699">
<form target="_blank" name="signInformation" method="post" action="action.php"><!--这里的action.php是个虚拟的文件，点击提交会显示网页走丢-->
<table width="600px" align="center" bgcolor="#f2f2f2" >
<tr>
<td align="right">姓名:</td>
<td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td><input type="text" name="email" value="@163.com"></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="password" size="25" maxlength="6" placeholder="请输入密码"></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" name="password" size="25" maxlength="6" placeholder="请再次确认密码"></td>
</tr>
<tr>
<td align="right">上传照片:</td>
<td><input type="file" name="file" ></td>
</tr>
<tr>
<td align="right">性别:</td><!--显示给用户的文字是直接写在input的外面，给服务器提交的时候提交的是value的值-->
<td>男<input type="radio" name="sex" value="man" checked><!--单选框的name要一样，默认选择的后面加checked-->
女<input type="radio" name="sex" value="women">
保密<input type="radio" name="sex" value="bm">
</td>
</tr>
<tr>
<td align="right">爱好:</td><!--多选框的name属性也要都一样，这个是为了区分一组选择和另一组选择-->
<td>读书<input type="checkbox" name="dx1" value="read" checked>
唱歌<input type="checkbox" name="dx1" value="sing">
跳舞<input type="checkbox" name="dx1" value="dance">
</td>
</tr>
<tr>
<td align="right">城市:</td>
<td>
<select name="city" ><!--如果是单项选择就不要写size和multiple属性-->
<option value="无">--请选择--</option>
<option value="北京" selected>北京</option><!--默认的是选择的背景-->
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="福建">福建</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</select>
</td>
<!-- <td>
如果想让选项以列表的形式展示，并且可以多选，就要写上size和multiple属性
<select name="city" size="6" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="福建">福建</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</select>
</td> -->
</tr>
<tr>
<td align="right">城市:</td>
<td>
<select name="city" >
<option value="无">--请选择--</option>
<optgroup label="一线城市">
<option value="北京" >北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</optgroup>
<optgroup label="二线城市">
<option value="福建">福建</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<!--注意不能同时写placehodler和<textarea>内容</textarea>之间的内容-->
<td align="right">简介:</td>
<td><textarea name="jj" placeholder="请书写不少于200字的自我介绍 " rows="5" cols="50"></textarea></td>
</tr>
<tr> <!--通过value的值来改变按钮上的文字，但是name不能改变按钮上的文字，只是取名字而已-->
<td colspan="2" align="center"><input type="button" value="来点我">
<input type="submit" value="submit">
<input type="reset" value="reset">
<input type="image" name="image_button" src="C:\Users\Administrator\Desktop\新建文件夹 (2)\u=2513785487,2994727882&fm=27&gp=0.jpg" width="35" height="20s"><!--image属性还有和submit一样的提交的功能-->
</td>
</tr>
<tr>
<!--隐藏域是说用户看不到，但是需要提交到服务器上的内容，就写在隐藏域中-->
<!--怎么知道这个hidden的部分被提交了呢？点击提交按钮，在网页的网址处会有变化，后面会跟上一串这样的代码：
username=&email=%40163.com&password=&password=&file=&sex=man&dx1=read&hidden=这是用户注册信息-->
<td><input type="hidden" name="hidden" value="这是用户注册信息"></td>
<td></td>
</tr>
</table>
<form>
</body>
</html>
实例效果图：
