一、表单在网页中的应用：登录、注册
二、表单语法：method:规定如何发送表单数据常用值get/post，action:表示向何处发送表单数据
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
在实际网页开发中通常采用post方式提交表单数据
三、表单元素格式
<input type="text" name="fname" value="text"/>
type:input元素类型 ；name:input元素名称；input元素的值;
| 属性 | 说明 |
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type 为 radio时必须指定一个值 |
| maxlength | type为text 或 password 时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
| size | 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
四、表单元素
1.文本框：type:文本框；name：文本框名称；value：文本框初始值；size："文本框长度；maxlength："文本框可输入最多字符";
<input type="text" name="userName" value="用户名" size="30" maxlength="20" />
2.密码框
<input type="password " name="pass" size="20" />
注：type是密码框；name是密码框名称；size是密码框的长度
3.单选按钮
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
注：type是单选按钮框；value：是值；checked是单选按钮选中状态
4.复选框
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
注：type是复选框；value是值；checked是复选框选中状态
5.列表框
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
select是列表框；selected是默认选中项；option:是选项
6.按钮
a、图片按钮
<input type="reset" name="butReset" value="reset按钮">
<input type="image" src="images/login.gif" />
<input type="button" name="butButton" value="button按钮"/>
注：type的reset是重置按钮，button是普通按钮，image是提交按钮；
src是图片路径；value是按钮上显示的文字
7.多行文本域
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
注：textarea是多行文本域；cols是显示的列数；rows是显示的行数
8.文件域
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
type:文件域；enctype:表单编码属性；
9.邮箱
<p>邮箱:<input type="email" name="email"/></p>
<input type="submit"/>
注：type是邮箱；会自动验证Email地址格式是否正确
10.网址
<p>请输入你的网址:<input type="url" name="userUrl"/></p>
<input type="submit"/>
注：type:是网址；会自动验证URL地址格式是否正确
11.数字
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>
type是数字；min是允许的最小值；max是允许的最大值;step是合法的数字间隔
12.滑块
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>
type是滑块；min是允许的最小值；max是允许的最大值；step是合法的数字间隔
13.搜索框
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>
<input type="submit"/>
type的search是搜索框
五、表单的高级应用
1.隐藏域
<input type="hidden" value="666" name="userid">
2.只读和禁用
<input name="name" type="text" value="张三" readonly>
<input type="submit " disabled value="保存" >
注：W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略；readonly是只读文本框；disabled是禁用
六、表单元素的标记
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
for="id"和id="male"都是表示表单元素的id
1.增强鼠标的可用性
2.自动将焦点转移到与该标注相关的表单元素上
七、表单的初级验证
1.placeholder
a.input类型的文本框提供一种提示（hint）
b.可以描述文本框期待用户输入何种内容
c.提示语默认显示，当文本框中输入内容时提示语消失
d.适合于input标签：text、search、url、email和password等类型
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
placeholder是文本框输入内容提示
2.required
a.规定文本框填写内容不能为空，否则不允许用户提交表单
b.适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username" required/>
required是必填项
3.pattern
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
注：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单；pattern=是验证规则，正则表达式
八、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易邮箱登录页面</title>
</head>
<body>
<form action="#" method="post">
<p><img src="image/163logo.gif" alt="网易邮箱"></p>
<p>
<a href="https://mail.163.com/" target="_blank">免费邮</a>
<a href="https://mail.163.com/">网易邮</a>
<a href="https://mail.163.com/">VIP邮</a>
<a href="https://mail.163.com/">帮助</a>
</p>
<p><img src="image/imap.jpg" alt=""></p>
<ul>
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页，实现发送、阅读邮件</li>
</ul>
<p>
<a href="https://mail.163.com/">立即同步</a>
<a href="https://mail.163.com/">普通登录</a>
<a href="https://mail.163.com/">手机号登录</a>
</p>
<p> 用户名： <input type="email" name="email"/> @163.com</p>
<p> 密码：<input type="password"/> </p>
<p>
版本：<select name="text">
<option value="默认">默认</option>
<option value="1.0">极速</option>
</select>
</p>
<p>
<input type="checkbox" name="login" checked/> 自动登录
<input type="checkbox" name="SSL"/> SSL
</p>
</form>
<p>
<img src="image/netease_logo.gif" alt="网易">
<a href="">关于网易</a>
<a href="">免费邮</a>
<a href="">官方博客</a>
<a href="">隐私政策</a> |
<a href="">网易公司版权所有 © 1997-2011</a>
</p>
</body>
</html>注： target="_blank"是在新网页中打开衔接；
target="_self"是在原网页中打开衔接地址；
2477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
