这个连接讲的很好，一下实例整合至该链接参考来源
1,一个简单的form表单
效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML form 标签示例</title>
</head>
<body>
<form id="dreamduform" method="post" action="http://www.dreamdu.com/dreamdu.php">
用户名: <input type="text" id="username" name="username" />
密码: <input type="password" id="pass" name="pass" />
提交:
<input type="submit" value="submit" id="submit" name="submit" />
<input type="reset" value="reset" id="reset" name="reset" />
</form>
</body>
</html>
2, 这是一个包含较多表单元素的form 类型只有<input>和<textarea>
效果是这个样子的(您可以粘贴到你的文件中调试):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML input 标签示例</title>
</head>
<body>
<form id="dreamdu" action="http://www.dreamdu.com/dreamdu.php" method="post" enctype="multipart/form-data">
<p>
用户名和密码:
<input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
用户名:
<input type="text" id="username" name="username" value="dreamdu" size="15" maxlength="25" />
密码:
<input disabled="disabled" type="password" id="pass" name="pass" size="15" maxlength="25" />
无法输入的单行输入框
<input id="notinput" name="notinput" type="text" value="梦之都" readonly="readonly" />
多行输入域：
联系我们
<textarea cols="50" rows="10" id="contactus" name="contactus">
可爱的猴子 dreamdu@dreamdu.com
</textarea>
无法输入的多行输入框
<textarea cols="50" rows="10" id="textarea" name="textarea" readonly="readonly">梦之都</textarea>
</p>
<p>
网站建设服务:
注册域名 <input type="radio" value="注册域名" id="service1" name="service" />
购买空间 <input type="radio" value="购买空间" id="service2" name="service" />
购买云主机 <input type="radio" value="购买云主机" id="service3" name="service" />
网站定位与策划 <input type="radio" value="网站定位与策划" id="service4" name="service" />
网站建设与制作 <input type="radio" value="网站建设与制作" id="service5" name="service" />
网站推广 <input type="radio" value="网站推广" id="service6" name="service" />
网站运营 <input type="radio" value="网站运营" id="service7" name="service" />
SEO服务 <input type="radio" value="SEO服务" id="service8" name="service" />
</p>
<p>
个人发展方向:
游戏人生 <input type="checkbox" checked= "checked" value="游戏人生" id="direction1" name="direction1" />
美工设计 <input type="checkbox" disabled="disabled" value="美工设计" id="direction2" name="direction2" />
编程开发 <input type="checkbox" value="编程开发" id="direction3" name="direction3" />
运营与管理 <input type="checkbox" value="运营与管理" id="direction4" name="direction4" />
创业 <input type="checkbox" value="创业" id="direction5" name="direction5" />
</p>
<p>
照片:
个性照片上传
<input type="file" id="myimage" name="myimage" size="35" maxlength="255" />
</p>
<p>
提交:
<input type="submit" value="submit" id="submit" name="submit" />
<input type="reset" value="reset" id="reset" name="submit" />
</p>
</form>
</body>
</html>
3 ,select使用
多选菜单可以按住"Ctrl"键,同时点击选择项进行多选,或者按住"Shift"进行连续多选
效果是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML select 标签示例</title>
</head>
<body>
<form id="dreamduform" action="http://www.dreamdu.com/dreamdu.php" method="post">
你对梦之都的感觉:
<select size="1" id="select" name="select">
<option>很全面,很好2</option>
<option>很全面,很好3</option>
<option>很全面,很好4</option>
</select>
你想在梦之都学习的编程语言:
<select size="5" multiple="multiple" id="multipleselect" name="multipleselect[]">
<option>XHTML</option>
<option>XHTML2</option>
<option>XHTML2</option>
<option>XHTML4</option>
</select>
提交:
<input type="submit" value="submit" id="submit" name="submit" />
<input type="reset" value="reset" id="reset" name="reset" />
</form>
<p>多选菜单可以按住"<strong>Ctrl</strong>"键,同时点击选择项进行多选,或者按住"<strong>Shift</strong>"进行连续多选</p>
</body>
</html>
4，select中的option使用
效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML select 标签示例</title>
</head>
<body>
<form id="dreamduform" action="http://www.dreamdu.com/dreamdu.php" method="post">
你对梦之都的感觉:
<select size="1" id="select" name="select">
<option>很全面,很好2</option>
<option>很全面,很好3</option>
<option>很全面,很好4</option>
</select>
你想在梦之都学习的编程语言:
<select size="5" multiple="multiple" id="multipleselect" name="multipleselect[]">
<option>XHTML</option>
<option>XHTML2</option>
<option>XHTML2</option>
<option>XHTML4</option>
</select>
提交:
<input type="submit" value="submit" id="submit" name="submit" />
<input type="reset" value="reset" id="reset" name="reset" />
</form>
<p>多选菜单可以按住"<strong>Ctrl</strong>"键,同时点击选择项进行多选,或者按住"<strong>Shift</strong>"进行连续多选</p>
</body>
</html>
网友评论