您的位置：首页 > Web前端 > HTML

XHTML表单

2015-07-28 22:23 585 查看
表单——输入控件

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航