XHTML表单
2015-07-28 22:23
585 查看
表单——输入控件
1)文本框:使用input元素,设置该元素的type属性为text;size(控制文本的长度)、maxlength(用户能够输入的最大字符数)
例:
9)命令按钮:
1)文本框:使用input元素,设置该元素的type属性为text;size(控制文本的长度)、maxlength(用户能够输入的最大字符数)
例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--文本框</title> </head> <body> <form id="myForm" name="myFrom" action="#" method="post"> <p>姓<input type="text" id="firstname" size="30" maxlength="25"/></p> <p>名<input type="text" id="lastname"size="30" maxlength="25"/></p> </form> </body> </html>2)口令输入框:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--密码输入框</title> </head> <body> <form id="myForm" name="myForm" action="#" method="post"> <p>姓<input type="text" id="firstname" size="30" maxlength="25"></p> <p>名<input type="text" id="lastname" size="30" maxlength="25"></p> <p>口令<input type="password" id="password" size="30" maxlength="25"></p> </form> </body> </html>3)复选框和单选框:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html" <head> <meta charset="UTF-8"> <title>创建表单示例--密码字段</title> </head> <body> <form id="myForm" name="myForm" action="#" method="post"> <p>请选择你想要去旅游的城市</p> <p> <input type="checkbox" name="city" id="sh" value="shanghai" checked="checked">上海</input><br/> <input type="checkbox" name="city" id="cd" value="成都">成都</input><br/> <input type="checkbox" name="city" id="xa" value="西安">西安</input><br/> </p> <p>选择你的性别</p> <p> <input type="radio" name="gender" id="male" value="male">男</input><br/> <input type="radio" name="gender" id="female" value="female">女</input><br/> </p> </form> </body> </html>4)隐藏字段:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--隐藏字段</title> </head> <body> <form id="myForm" name="myForm" action="#" method="post"> <input type="hidden" id="e-mail" value="me@mysite.com"> <p>姓<input type="text" id="firstname" size="30" maxlength="25"></p> <p>名<input type="text" id="lastname" size="30" maxlength="25"></p> <p>口令<input type="password" id="password" size="30" maxlength="25"></p> </form> </body> </html>5)文件上传控件:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--文件上传控件</title> </head> <body> <form id="myForm" action="#" method="post" enctype="form/multipart"> <p>请以Word文档格式提供您的简历</p> <input type="file" id="resume"> </form> </body> </html>6)下拉列表:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--文件上传控件</title> </head> <body> <form id="myForm" action="#" method="post" enctype="form/multipart"> <p>请以Word文档格式提供您的简历</p> <input type="file" id="resume"> </form> </body> </html>7)多行文本框:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--多行文本框</title> </head> <body> <form id="myForm" name="myForm" action="#" method="post"> <textarea rows="10" cols="30" id="comment">请在此输入文本</textarea> </form> </body> </html>8)提交和重置按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--提交和重置按钮</title> </head> <body> <form id="myForm" name="myForm" action="#" method="post"> <p>您最喜欢的餐饮风格是?</p> <select id="food" multiple="multiple" size="4"> <option value="sichuan">川菜</option> <option value="guangdong">粤菜</option> <option value="beifang">北方菜</option> <option value="shanghai">上海菜</option> <option value="west" selected="selected">西餐</option> <option value="tailand">泰国菜</option> </select> <p> <input type="submit" value="发送"> <input type="reset" value="清除"> </p> </form> </body> </html>
9)命令按钮:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建表单示例--普通命令按钮</title> </head> <body> <form id="myForm" name="myForm" action="#" method="post"> <p>您最喜欢的餐饮风格是?</p> <select id="food" multiple="multiple" size="4"> <option value="sichuan">川菜</option> <option value="guangdong">粤菜</option> <option value="beifang">北方菜</option> <option value="shanghai">上海菜</option> <option value="west" selected="selected">西餐</option> <option value="tailand">泰国菜</option> </select> <p> <input type="button" value="增加"> <input type="button" value="删除"> </p> </form> </body> </html>10)label元素:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <label for="Firstname">Firstname:</label> <input type="text" id="Firstname" value="" size="30"> </p> </body> </html>11)Tab次序和键盘快捷键:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <label for="FirstName"><u>F</u>irstName:</label> <input type="text" id="FirstName" value="" size="30" tabindex="3" accesskey="F"> </body> </html>12)防止改变字段内容:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>readonly和disabled属性示例</title> </head> <body> <form id="myForm" action="#" method="post"> <p> <label for="oID">订单编号:</label> <input type="text" id="oID" size="12" value="X1248" readonly="readonly"> </p> <p> <label for="price">订单总价:</label> <input type="text" id="price" size="12" value="" disabled="disabled"> </p> </form> </body> </html>13)fieldset和legend元素:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>fieldset和legend元素示例</title> </head> <body> <form id="myForm" action="#" method="post"> <fieldset> <p> <legend>性别</legend> <input type="radio" id="gender" name="gender" value="male">男</input><br/> <input type="radio" id="gnder" name="gender" value="female">女</input> </p> </fieldset> </form> </body> </html>
相关文章推荐
- HTML标签 易混易错小总结
- 在html借助元素特性存储信息
- XHTML学习的重点部分
- XHTML基础
- html随笔
- Shiny应用基础(2):HTML元素产生方法
- HTML入门
- innerHTML,innerText,outHTML的用法及区别详解
- 强制html元素不随窗口缩小而换行
- XHTML基础
- html 横线的代码
- Get和POST表单提交方式详解
- html布局方式:div和table
- html不常见问题汇总
- HTML表格布局实际使用详解
- HTML 表格(2)
- HTML 表格(1)
- 当html页面乱码需要修改编码时
- HTML图片和文字一行时的对齐方式
- html如何在两个button之间天加空格