form 表单标签
form是表单标签元素的容器
<input type="text"> 文本输入框;
<input type="password"> 密码框;
<input type="radio"> 单选框;
<input type="checkbox"> 多选框;
<input type="submit"> 提交按钮;
<input type="reset"> 重置按钮;
<input type="button"> 普通按钮;
<input type="file"> 提交文件;
<input type="radio"> 单选框;如果选择其中一个,必须要给一个相同的 name 值!
如: 性别:男<input type="radio" name="sex"> 女<input type="radio" name="sex">
name 表单元素的属性,需要通过submit按钮提交的元素 必须要有 name 值!
name : 代表提交的属性是什么属性。
value :代表提交的属性值是什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单标签form练习</title>
<style>
form {
width: 700px;
font-size: 30px;
margin: 0 auto;
}
select{
font-size: 30px;
}
</style>
</head>
<body>
<form action="">
姓名:<input type="text" name="name"> <br> <!-- 文本输入框 -->
密码:<input type="password" name="password"><br> <!--密码框-->
性别:男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="women"><br> <!--单选框-->
<!-- 单选框如果要选择其中的一个时,必须要给它们一个相同的name值,让他们产生互斥! -->
年龄:<input type="text" name="age"><br>
爱好:唱歌<input type="checkbox" name="hobby" value="唱歌"> 画画<input type="checkbox" name="hobby" value="画画"> 看书<input type="checkbox" name="hobby" value="看书"><br> <!--多选框-->
</form>
</body>
</html>
input : focus{
boder: 2px solid red;
}
在style中写,当鼠标获得焦点时,所展现的效果!
二、下拉菜单 select
格式:
市 <select name="city" id="" size="2">
<option value="1">郑州</option>
<option value="2">三门峡</option>
<option value="3">商丘</option>
<option value="4">合肥</option>
<option value="5">南京</option>
</select>
name : 代表提交的属性是什么属性; option : 是下拉菜单的选项; value:提交时对应option的值;
size: 可以将下拉菜单设置成滑动的选项,size等于几,就可以展示几个选项。
![](https://i-blog.csdnimg.cn/blog_migrate/338fd5078a055a4fbe912e8ca658e127.png)
三、文本域
<textarea name=" " cols=" " rows=" " > ...</textarea>
cols : 代表列; rows : 代表行;
例子:
留言:<textarea name="message" id="" cols="30" rows="10"></textarea>
浏览器解析出来为:
![](https://i-blog.csdnimg.cn/blog_migrate/5142f6f7e328fe2b9df997247c252a42.png)
重点 如果样式不对可以在style设置一下样式:
textarea {
vertical-align:top;
}
四、fieldest 自定义控件组
<fieldset>
<legend>体检报告</legend>
身高:<input type="text"> <br>
体重:<input type="text"><br>
视力:<input type="text"><br>
报告:<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>
![](https://i-blog.csdnimg.cn/blog_migrate/ce8dfcab6997f2a8df744602337259ea.png)
1. fieldset 标签将表单内容一部分打包,生成一组相关表单的字段;2.当一组表单元素放到 <fieldset></fieldset>标签内时,浏览器会以线框来显示它们;3.<legend></legend>标签为fieldset 元素定义的标题
作业:代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>个人信息</title>
<style>
div {
width: 700px;
margin: 0 auto;
border: 1px solid #3e2f32;
}
h1 {
text-align: center;
}
form {
margin: 0 30px 50px;
}
textarea {
vertical-align: top;
width: 550px;
}
</style>
</head>
<body>
<div>
<h1>个人信息</h1>
<form action="">
姓名:<input type="text"><br><br>
年龄:<input type="text"> <br><br>
照片:<input type="file"> <br><br>
<fieldset>
<legend>身体特征</legend>
身高:<input type="text"> cm <br><br>
体重:<input type="text"> kg <br>
</fieldset>
<br><br>
性别:<label><input type="radio" name="sex" value="man">男</label>
<label><input type="radio" name="sex" value="women">女</label>
<br><br>
爱好:<label><input type="checkbox" name="hobby" value="sing">唱</label>
<label><input type="checkbox" name="hobby" value="jump">跳</label>
<label><input type="checkbox" name="hobby" value="rap">rap</label>
<br><br>
出生地:<select name="birthplace" id="">
<option value="1">商丘</option>
<option value="2">郑州</option>
<option value="3">洛阳</option>
<option value="4">卢氏</option>
<option value="5">三门峡</option>
<option value="6">周口</option>
</select>
<br><br>
自我评价:<textarea name="evaluate" id="" cols="30" rows="5"></textarea>
<br><br>
<input type="submit">
</form>
</div>
</body>
</html>