《HTML之表单》
来源：互联网 发布：如何查看手机网络制式 编辑：程序博客网 时间：2024/06/07 05:32
表单结构：
表单控件位于<form>……</form>元素之中，<form>元素有三个特性：action特性、method特性和id特性。每个<form>元素都应该设置action特性，有时还需要设置method特性和id特性。
action：其特性值是服务器上一个页面的URL，这个页面用来在用户提交表单的时候接收表单中的信息。
method：表单的提交可以采用以下两种方法之一（get或者post）
get-使用get方法时，表单中的值被附加在由action特性所指定的URL末尾。适用于以下情形：
- 短表单（例如搜索框）
- 只从Web服务器上检索数据的情形（不发送那些要在数据库中添加或删除的数据）
- 允许用户上传文件
- 非常长
- 包含敏感信息（例如密码）
- 向数据库添加信息，或是从数据库中删除信息
表单元素分类：
1、<input>元素可以用来创建多种不同的表单控件，其type特性的值决定了他将要创建哪种控件。可以创建以下表单控件：
- 单行文本框
- 密码框
- 单选按钮
- 复选框
- 文件上传域
- 提交按钮
- 图像按钮
- 隐藏控件
- 日期控件
- 电子邮件和URL输入控件
- 搜索输入控件
3、<button>元素用于创建按钮
4、<label>用于创建标签表单控件
5、<fieldset>和<legend>元素用于创建组合表单
【一】单行文本框
特性：
单行文本框用<input>元素来创建，包含type、name、size、maxlength四个特性。
type特性：单行文本框的type特性值为“text”。
name特性：对表单控件进行标识并与输入的信息一同传送到服务器，特性值看情况，如果是用户名则为“username”，取别的名字也无所谓，服务器需要。
size特性：用来指定文本框的宽度，只能在旧表单中使用，不能使用在新表单中了。
maxlength特性：可以输入字符的最大数量。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>单行文本框</title></head><body> <form action="http://www.example.com.login.php"> <p>用户名： <input type="text" name="username" size="15" maxlength="30" /> </p> </form></body></html>演示结果：
【二】密码框
特性：
密码框用<input>属性来创建，也包含type、name、size、maxlength四个特性。除了type特性值为“password”之外，其他的属性跟单行文本框没什么太大区别。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>单行文本框</title></head><body> <form action="http://www.example.com.login.php"> <p>密码： <input type="password" name="password" size="15" maxlength="30" /> </p> </form></body></html>演示结果：
特性：
多行文本框用<textarea>……</textarea>元素来创建，包含name、id、cols、rows。cols为文本域的宽度，rows为文本域的高度（行数）,中间为显示的文字。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>单行文本框</title></head><body> <form action="http://www.example.com/comments.php"> <p>多行文本框：</p> <textarea name="comments" cols="30" rows="10">请输入文字</textarea> </form></body></html>演示结果：
特性：
单选按钮由<input>元素创建，包含type、name、value、checked四个特性。
type特性：type=“radio”,只能选择一个。
name特性：单选按钮的name特性值都应该相同。
value特性：被选中时发送到服务器的值，各不相同。
checked特性：checked=“checked”用来指定哪个值被选中，同一组中只能有一个使用，因为是单选按钮。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>单选按钮</title></head><body> <form action="http://www.example.com/comments.php"> <p>单选按钮：</p> <br> <input type="radio" name="genre" value="teacher" checked="checked"> 老师 <input type="radio" name="genre" value="student"> 学生 <input type="radio" name="genre" value="IT"> 程序员 </form></body></html>
演示结果：
【五】复选框
特性：
复选框由<input>元素创建，同样包含type、name、value、checked四个特性，type=“checkbox”，其他的跟单选按钮类似。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>复选框</title></head><body> <form action="http://www.example.com/profile.php"> <p>复选框：</p> <br> <input type="checkbox" name="genre" value="teacher" checked="checked"> 老师 <input type="checkbox" name="genre" value="student"> 学生 <input type="checkbox" name="genre" value="IT"> 程序员 </form></body></html>
演示结果：
【六】下拉列表框
特性：
下拉列表框由<select>……</select>和<option>……</option>元素共同完成。<select>用来创建下拉列表框，而<option>用来指定下拉列表中的选项，option中有value和selected特性（表示被选中）。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>下拉列表框</title></head><body> <form action="http://www.example.com/profile.php"> <p>下拉列表框：</p> <select name="devices"> <option value="china">中国</option> <option value="America">美国</option> <option value="France">法国</option> <option value="Germany">德国</option> </select> </form></body></html>
演示结果：
【七】多选框
特性：
多选框由<select>……</select>和<option>……</option>元素创建，与前面稍有不同的是，多选框加入了size和multiple两个特性。
size：一次显示的选项的的数量。
multiple：multiple=”multiple“，用来告诉用户可以多选。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>多选框</title></head><body> <form action="http://www.example.com/profile.php"> <p>多选框：</p> <select name="instruments" size="3" multiple="multiple"> <option value="china" selected="selected">中国</option> <option value="America" selected="selected">美国</option> <option value="France">法国</option> <option value="Germany">德国</option> </select> </form></body></html>
演示结果：
【八】文件上传域
特性：
由<input>元素创建，type=“file”，用来上传文件，发送方式为post。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>文件上传域</title></head><body> <form action="http://www.example.com/upload.php" method="post"> <p>文件上传域：</p> <input type="file" name="user-song" /><br> <input type="submit" value="上传" /> </form></body></html>
演示结果：
【九】提交按钮
特性：
由<input>元素创建，type=“submit”，用来将表单发送到服务器。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>提交按钮</title></head><body> <form action="http://www.example.com/upload.php" method="post"> <p>提交按钮：</p> <input type="text" name="emails" /> <input type="submit" name="subscribe" value="提交" /> </form></body></html>
演示结果：
【十】图像按钮
特性：
由<input>元素创建，包含type、src、width、height和alt等特性。可以使用图像作为提交按钮。
type：type=“image”
src：图片的路径
width：图片的宽度，宽度和高度只需要指定一个就行了，系统会匹配
height：图片的高度
alt：未知
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>提交按钮</title></head><body> <form action="http://www.example.org/subscribe.php"> <p>图像按钮：</p> <input type="text" name="emails" /> <input type="image" src="1.jpg" width="25" /> </form></body></html>
演示结果：
【十一】按钮和隐藏控件
特性：
由<button>……</button>和<input>元素创建，可以在<button>标签之间使用文本或者图像。type=“hidden”
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>按钮和隐藏控件</title></head><body> <form action="http://www.example.org/add.php"> <p>按钮和隐藏控件：</p> <button> <img src="1.jpg" alt="add" height="50">添加 </button> <input type="hidden" name="bookmark" value="lyrics" /> </form></body></html>
演示结果：
【十二】标签表单控件
特性：
由<label>……</label>元素创建，包含for特性，用来声明标签控件标注的是哪个表单控件。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>标签表单控件</title></head><body><form action="http://www.example.org/add.php"> <p>文本说明和表单输入框全部包围起来</p> <label> 年龄： <input type="text" name="age" /><br> </label> <br> 性别： <input id="female" type="radio" name="gender" value="f"> <label for="female">男性</label> <input id="male" type="radio" name="gender" value="m"> <label for="male">女性</label></form></body></html>
演示结果：
【十三】组合表单
特性：
由<fieldset>……</fieldset>和<legend>……</legend>元素共同创建。<fieldset>用来创建一个包围框，而<legend>用来取名字。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>标签表单控件</title></head><body><form action="http://www.example.org/add.php"> <fieldset> <legend>个人信息</legend> <label> 电子邮件： <br> <input type="text" name="email" /> </label><br> <label> 手机号码： <br> <input type="text" name="mobile" /> </label><br> <label> QQ： <br> <input type="text" name="QQ" /> </label><br> </fieldset></form></body></html>
演示结果：
【十四】表单验证
作用：填写表单错误后会弹出错误提示信息。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>标签表单控件</title></head><body> <form action="http://www.example.org/login/" method="post"> <label for="username">用户名：</label> <input type="text" name="username" required="required" /> <br> <label for="password">密码：</label> <input type="password" name="password" required="required" /> <br> <input type="submit" value="登录" /> </form></body></html>
演示结果：
【十五】日期控件
特性：
由<input>元素创建，type=“date”。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>日期控件</title></head><body><form action="http://www.example.org/bookings/" method="post"> <label for="username">日期：</label> <input type="date" name="date1" /> <input type="submit" value="确认"></form></body></html>
演示结果：
【十六】电子邮件和URL输入
特性：
由<input>元素创建，type=“email”和type=“url”。
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>日期控件</title></head><body><form action="http://www.example.org/subscribe.php"> <p>请输入电子邮件：</p> <input type="email" name="email" /> <input type="submit" value="提交" /></form><form action="http://www.example.org/profile.php"> <p>请输入网址：</p> <input type="url" name="website" /> <input type="submit" value="提交" /></form></body></html>
演示结果：
【十七】搜索输入控件
特性：
由<input>元素创建，type=“search”
代码示例：
<!DOCTYPE html><html lang="en"><head> <!--可以显示中文--> <meta charset="UTF-8"> <title>日期控件</title></head><body><form action="http://www.example.org/search.php"> <p>搜索：</p> <input type="search" name="搜索"> <input type="submit" value="搜索"></form></body></html>
演示结果：
【表单Demo】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><body> <form action="http://www.example.com/review.php" method="get"> <label for="username">日期：</label> <input type="date" name="depart" /> <input type="submit" value="Submit" /> <fieldset> <legend> 你的个人信息: </legend> <label> 用户名: <input type="text" name="name" size="30" maxlength="100" /> </label> <br> <label> 登录密码: <input type="text" name="name" size="30" maxlength="100" /> </label> <br> <label> 昵称: <input type="text" name="name" size="30" maxlength="100" /> </label> <br> <label> 电子邮件: <input type="email" name="email" size="30" maxlength="100" /> </label> <br> </fieldset> <br> <fieldset> <legend> 你的评价: </legend> <p> <label for="hear-about"> 你从哪个网站了解的我们? </label> <select name="referrer" id="hear-about"> <option value="google">谷歌</option> <option value="BaiDu">百度</option> <option value="QQ">QQ浏览器</option> <option value="other">Other</option> </select> </p> <p> 你还想再进一步了解我们？ <br> <label> <input type="radio" name="rating" value="yes" /> Yes </label> <label> <input type="radio" name="rating" value="no" /> No </label> <label> <input type="radio" name="rating" value="maybe" /> Maybe </label> </p> <p> <label for="comments"> 你的评论: </label> <br> <textarea id="comments" cols="40" rows="4">请输入文字:</textarea> </p> <label> <input type="checkbox" name="subscribe" checked="checked" /> 点我更新 </label> <br> <input type="submit" value="提交" /> </fieldset> </form></body></html>【演示结果】
- HTML之表单
- HTML之表单
- HTML学习之表单
- html之表单
- html基础之表单
- HTML之表单标签
- Html之表单标签
- HTML之表单初识
- HTML之表单
- HTML之表单
- html之表单标签
- HTML之表单元素
- HTML学习之表单
- html之表单总结
- html之表单
- html 之表单form
- 《HTML之表单》
- HTML之交互式表单
- 从jsp页面发送ajax请求，servlet接受参数并返回json数据
- 算法分析与设计第九周
- day27笔记
- 深入理解JavaScript编程中的同步与异步机制
- for each
- 《HTML之表单》
- 运算符之：3、关系运算符（6个）
- 笔试整理 六
- springmvc+mybatis配置过程及示例
- 多线程学习记录2
- 234-Palindrome Linked List
- 决策树：ID3算法
- Struts2基础01：编写第一个HelloStruts2程序
- SpringMVC（二）
