写在前面

表单的标签粗记得有form、input、select、textarea：input常用type属性值有text，password，radio，CheckBox，file，submit，rese等。笨脑袋，就记到这么多

表单

表单元素还有一看上去些不出常用的fieldset：用来定义一组表单元素并将它们括起来，还有一个legend用来定义fieldset的标题，就像是table的caption，表单除了input定义的button还可单独<button>来定义按钮功能应该更好的扩展；此外select和option、optgroup也是配套存在的。

总的来说，增加新的认识关于表单：以组队的方式存在的表单成员，最大的两个是表单的定义层两个顶级标签 form和fieldset与legend，select和option与optgroup，还有大量的游兵散将button和input，其中input个性鲜明是什么就是什么（这取决于它的type，它的type比较多），button万磁王不多说。

最后还有新家的一些表单元素：label标签有一个for属性用来激活input和button;

还有一些表单标签有是我感觉不常用的：datalist(感觉是和兼容有关的一个标签)；keygen output表单输出表签，这三个标签在正式的运用上感觉少不了，有感觉会有很多替代品，表单是用来提价的，是用户将信息录入交给服务器的。所以form有一个重要的属性叫做action，还有一个叫method方法和动作，这两个属性的值也要记忆。

下面还是进入重要无比的实践环节，争取包纳所有。

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<meta http-equiv="refresh" content="10"/>
		<link href="css/main.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div class="container">
		<form action="" method="">
			<fieldset>
				<legend>基本信息</legend>
				姓名：<input /><br>
				年龄：<input /><br>
				性别：<input type="radio" name="sex"/>男
				<input type="radio" name="sex"/>女<br>
			</fieldset>
			<fieldset>
				<legend>登入</legend>
				账号：<input /><br>
				密码：<input type="password" /><br>
				<input type="submit"/><input type="reset"/>
			</fieldset>
			<fieldset>
				<legend>个性化指定</legend>
				爱好：<select>
							<optgroup label="球类" />
								<option>篮球</option>
								<option>羽毛球</option>
								<option>乒乓球</option>
							<optgroup label="塑身"/>
								<option>瑜伽</option>
								<option>打坐</option>
								<option>太极</option>
						    <optgroup label="有氧" />
								<option>跑步</option>
								<option>跳远</option>
								<option>调高</option>
				      </select>
				
			</fieldset>

		</form>
		</div>
	</body>
</html>

body{
	margin:0;
	padding:0;
}
.container{
	width:500px;
	margin:0px auto;
}
fieldset{
	border:1px solid;
	border-color:red;
}

发现用起来用起来就显得健忘，fieldset的拼写出问题，select的optgroup是内联标签重要的属性名叫label，记性好差

样式没加多少，再说吧，有一些重要表签也没用到，但是这些标签的效果我也看不懂留着以后继续深化

HTML基础（三）

写在前面

表单

猜你喜欢