表单标签form input select textarea

 

 

 

 

 

 

 

 

 

 select下拉列表元素

 

 

 

 

 

 

表格标签内可以使用表单标签的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>世纪佳缘</title>
	</head>
	<body>
		<h3>青春不常在,抓紧谈恋爱</h3>
		<table cellpadding="15" cellspacing="0" >
			<tr>
				<td>性别</td>
				<td><input type="radio" name="sex" id="nan"><label for="nan">男</label><input type="radio" name="sex" id="nv"><label for="nv">女</label></td>
			</tr>
			<tr>
				<td>生日</td>
				<td>
					<select>
						<option value ="">请选择年份</option>
						<option value ="">2012</option>
						<option value ="">2013</option>
						<option value ="">2014</option>
						<option value ="">2015</option>
					</select>
					<select>
						<option value ="">请选择月份</option>
						<option value ="">1</option>
						<option value ="">2</option>
						<option value ="">3</option>
						<option value ="">4</option>
					</select>
					<select>
						<option value ="">请选择日</option>
						<option value ="">1</option>
						<option value ="">2</option>
						<option value ="">3</option>
						<option value ="">4</option>	
					</select>	
				</td>
			</tr>
			<tr>
				<td>所在地区</td>
				<td><input type="text" value="北京"></td>
			</tr>
			<tr>
				<td>婚姻状况</td>
				<td><input type="radio" name="self" id="wei"><label for="wei">未婚</label><input type="radio" name="self" id="yi"><label for="yi">已婚</label><input type="radio" name="self" id="li" checked="checked"><label for="li">离婚</label></td>
			</tr>
			<tr>
				<td>学历</td>
				<td><input type="text" value="高中生"></td>
			</tr>
			<tr>
				<td>喜欢的类型</td>
				<td>妩媚的<input type="checkbox">可爱的<input type="checkbox">小鲜肉<input type="checkbox">老腊肉<input type="checkbox"></td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td><textarea rows="" cols="">自我介绍</textarea></td>
			</tr><tr>
				<td></td>
				<td><input type="submit" value="免费注册"></td>
			</tr><tr>
				<td></td>
				<td><input type="checkbox" >我同意注册条款和会员加入标准</td>
			</tr><tr>
				<td></td>
				<td><a href="#">我是会员,立即登录</a></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<ul>
						<li>年满十八岁,单身</li>
						<li>抱着严肃的态度</li>
						<li>真诚寻找另一半</li>
					</ul>
				</td>
			</tr>
		</table>
		
		
		
	</body>
</html>

  

 

 

 

 

 

 1 <!DOCTYPE html> 
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>表单</title>
 6     </head>
 7     <body>
 8         <!-- 有多个表单要给每个表单取名字 -->
 9         <form action="http://baidu.com/s" method="get" name="form1">
10             <!-- 当表单内容提交给服务器时,name为wd或者word -->
11             搜索:<input type="text" name="wd" id="" value="" />
12             <input type="submit" value="提交"/>
13         </form>
14         <!-- action=""指提交给服务器的地址 ,地址加/s保密性更高-->
15         <!-- method="get"默认提交方式公开;method="post"加密提交,主要用于公司内部服务器 -->
16         <form action="" method="get" name="form2"></form>
17             <h1>文本框</h1>
18             <!-- label获取焦点 -->
19                 <label for="a">姓名:</label>
20                 <input type="text" id="a" name="wenbenkuang" value="请输入姓名" size="28" maxlength="4" />
21             <h1>密码框</h1>
22                 <label for="b">密码:</label>
23                 <input type="password" name="mimakuang" id="b" value="请输入密码" />
24             <h1>复选框</h1>
25                 课程:
26                 <!-- checked="checked"默认选中 -->
27                 <input type="checkbox" name="subject" id="" value="1"checked="checked" />HTML
28                 <input type="checkbox" name="subject" id="" value="2" />CSS
29                 <input type="checkbox" name="subject" id="" value="3" />JavaScript
30             <h1>单选按钮</h1>
31                 性别:
32                 <input type="radio" name="sex" id="" value="male" checked="checked" />33                 <input type="radio" name="sex" id="" value="remale" />34             <h1>隐藏域</h1>
35                 <input type="hidden" name="phone" id="" value="88888888" />phone
36             <h1>提交按钮</h1>
37             <!-- value表示初始值,submit默认值是提交,不管value值为什么,功能不变 -->
38             <!-- submit和image功能都是一样的 -->
39                 <input type="submit" name="" id="" value="提交" /><br>
40                 <!-- reset重置是回到初始值 -->
41                 <input type="reset" name="" id="" value="重置" /><br>
42                 <input type="button" name="" id="" value="点击我" /><br>
43                 <input type="image" name="photo" src="img/he.png" width="100px" height="30px"/>
44             <h1>下拉列表</h1>
45                 <!-- size设置可视区域,multiple="multiple"下拉列表选项按住ctrl键可多选 -->
46                 <select name="car" id="" size="2" multiple="multiple">
47                 <!-- selected="selected"默认选项,不能有size和multiple,否则没有效果 -->
48                     <option value="1" selected="selected">奔驰</option>
49                     <option value="2">宝马</option>
50                     <option value="3">奥迪</option>
51                 </select>
52             <h1>多行文本域</h1>
53                 <!-- 默认为两行  rows表示列数,cols表示行数 disabled="disabled"显示灰色,表示禁用该文本区;readonly="readonly"表示文本区为只读;style="resize: none;"表示不能调整文本域的大小 -->
54                 <textarea rows="5" cols="30" name="duohangwenben"  readonly="readonly" style="resize: none;">
55                 有一次刘备下令蜀装禁止酿酒,结果抓了一户家里有酿酒器材居民,这户居民被治了罪。恰好有一天,简雍和刘备乘车出巡,路上见了一男一女,显雍对刘备说:这两人准备做非法勾当,为什么不抓起来?刘备问:你怎么知道的呢?简庸说:你看啊,他们有作案的工具不适合有酿酒器材,那家人一样吗?刘备听了后笑了笑,赶紧把抓的人放了。  </textarea>
56     
57     </body>
58 </html>

 

posted @ 2021-10-16 13:37  小闫的姑娘  阅读(28)  评论(0编辑  收藏  举报