表单的工作原理
简单来说就是客户在浏览器输入信息之后，浏览器将用户在表单中的数据进行打包发送给服务器，服务器接收到之后进行处理，如下图
语法
<form> 表单元素 </form>
form标签的属性
常用的表单元素以下这些
<input /> 表单输入标签 <select > 菜单和列表标签 <option > 菜单和列表项目标签 <textarea > 文字域标签 <optgroup> 菜单和列表项目分组标签
input标签
语法
<input type="类型属性" name="名称" .... />
常用的type的类型属性都有
text 文字域 password 密码域 file 文件域 checkbox 复选域 radio 单选域 button 按钮 submmit 提交按钮 reset 重置按钮 hidden 隐藏域 image 图像域
写一个简单的用户名密码和提交按钮
View Code
打开上面的页面输入密码，发现密码是密文显示，我们见过，密码框后面有个小眼睛，点击之后就变成了明文，其实很简单，只是把type的属性password换成了text，后面学到js的时候，就能很容易的做出来这种效果
单行文本域的属性
name 文字域的名称 maxlength 指用户输入的最大字符长度 size 指定文本框的宽度，默认20个字符 value 指定文本框内的默认值 placeholder 规定用户填写输入字段的提示，文本框内浅灰色显示
完成以下的表单
View Code
图像域
图像域是做什么的呢？我们发现上面的提交按钮都非常的丑陋，如果可以换一张 漂亮的图片也实现提交的功能，那多好呢，这时候就要用到图像域了
语法
<input type="image" name="..." src="imageurl" />
隐藏域
如果我们想往服务器上发送一些东西，但是不想让用户看到，这时候就要用到隐藏域了
语法
<input type="hidden" name="..." value="提交到服务器的信息">
下拉菜单和列表选项
语法
<select> <option value="提交服务器的值">内容</option> <option value="提交服务器的值">内容</option> <option value="提交服务器的值">内容</option> </select>
View Code
上面的代码运行后，发现只能选择一个，而且页面只显示了一个选项，如果想选多项就要了解下select的属性了
select的属性
name 设置下拉菜单和列表的名称 multiple 设置可选择多个选项 size 设置列表中可见选项的数目
option的属性
selected 设置选项默认选中状态 value 定义送往服务器的选项值
View Code
下拉分组
上面的几种方法已经可以满足我们的大多数要求，但是如果我们想要达到下面的效果怎么办
这时候就要用到分组optgroup了
语法
<select size="8" multiple> <optgroup label="分组名"> <option value="...">内容</option> <option value="...">内容</option> <option value="...">内容</option> <option value="...">内容</option> </optgroup> <optgroup label="分组名"> <option value="...">内容</option> <option value="...">内容</option> <option value="...">内容</option> <option value="...">内容</option> </optgroup> </select>
View Code
多行文本域textarea
有时候我们要在文本框里输入大段的文字怎么办，这时候input已经不能满足我们的需求了，我们就要使用textarea
语法
<textarea name="..." rows="..." cols="...">默认值</textarea>
点我
上面的代码是没有任何属性时的效果，大多数情况下我们都要给添加下属性
textera的属性
name 设置文本区的名称 placeholder 设置文本框内的提示，浅灰色 rows 设置文本框的可见行数 cols 设置文本框的可见宽度
给上面的代码添加上属性
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <form> <textarea placeholder="请输入介绍" rows="6" cols="80"></textarea> </form> </body> </html>
