1.表单标签
2.input标签属性与取值
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单标签form
input
取值：text---文本框
password---密码框
radio---单选框
checkbox---复选框（又称多选框）
submit---提交按钮
reset---重置按钮
button---自定义按钮
image---图片按钮
file---上传文件按钮
hidden---隐藏
-->
<form action="http://www.apeclass.com/">
<p>
<input type="text" name="userName" value="用户名" />
</p>
<p><input type="password" name="passWord" /></p>
<p>
<input type="radio" name="sex" value="men" />男
<input type="radio" name="sex" value="women" />女
</p>
<p>
<input type="checkbox" name="interest" value="eat" />吃饭
<input type="checkbox" name="interest" value="sleep" />睡觉
<input type="checkbox" name="interest" value="play" />打豆豆
</p>
<p>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</p>
<p>
<input type="button" value="自定义按钮" />
<input type="image" src="img/img_01.gif" />
</p>
<p>
<input type="file" name="img" />
</p>
<p>
<input type="hidden" />
</p>
</form>
</body>
</html>
效果图
3.label标签
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
label用来辅助input，点击label后能够让对应的input变成可输入的状态
for属性里放的是对应input的id
-->
<p>
<label for="userName">用户名：</label>
<input type="text" id="userName" />
</p>
<p>
<label for="pw" >密码：</label>
<input type="password" id="pw" />
</p>
<p>
<label for="number">手机号：</label>
<input type="text" id="number" />
</p>
</body>
</html>
4.checked默认选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
checked 让表单一上来有一个默认选中的状态
-->
<p>
<input type="radio" name="sex" value="men" />男
<input type="radio" name="sex" value="women" checked="checked" />女
</p>
<p>
<input type="checkbox" name="interest" value="eat" />吃饭
<input type="checkbox" name="interest" value="sleep" />睡觉
<input type="checkbox" name="interest" value="play" checked="checked" />打豆豆
</p>
</body>
</html>
5.disabled和readonly
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
disabled 禁止用户输入，并且这个表单不会被提交
readonly 让表单变成只读状态，这个表单会被提交
-->
<form action="http://www.apeclass.com/">
<p>
<label for="userName">用户名：</label>
<input type="text" name="userName" value="kaivon" disabled="disabled" />
</p>
<p>
<label for="pw" >密码：</label>
<input type="password" name="pw" value="123" readonly="readonly" />
</p>
<p>
<label for="number">手机号：</label>
<input type="text" name="number" />
</p>
<input type="submit" />
</form>
</body>
</html>
效果图
6.下拉框和文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
form{
margin: 0; /*IE6下会有一个margin*/
}
input{
margin: 0;
padding: 0;
outline: none;
}
textarea{
margin: 0;
padding: 0;
resize: none;
overflow: auto;
/*清除轮廓边框，
* 不清除时，鼠标点击文本域时，会看到一个略微放大的效果
*
* 你也可以设置一个outline看一下效果，如下
* /*outline: 5px solid red;*/
* */
outline: none;
border: 1px solid blue;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/">
<select name="area">
<option>北京</option>
<option selected="selected">上海</option>
<option>广州</option>
</select>
<input type="submit" />
<!--style=" 300px; height: 300px;"-->
<textarea name="text" id="" rows="5" cols="100"></textarea>
</form>
</body>
</html>