表单——输入控件
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>
<!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><!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><!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><!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><!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><!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><!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><!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><!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><!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><!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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
