3-表单
Release
- 本节代码下载: Setup
项目展示
效果
项目结构
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单</title>
<style>
.item {
margin: 5px;
}
</style>
</head>
<body>
<form
action=""
style="outline: 1px solid; display: block; padding: 10px; width: 320px;">
<div class="item">
<span>昵称:</span>
<input type="text" />
</div>
<div class="item">
<span>密码:</span>
<input type="password" />
</div>
<div class="item">
<span>邮箱:</span>
<input type="text" />
<select name="" id="">
<option value="">@qq.com</option>
<option value="">@163.com</option>
<option value="">@126.com</option>
</select>
</div>
<div class="item">
<span>性别:</span>
<input type="radio" name="gender" id="male" checked />
<label for="male"><span>男</span></label>
<input type="radio" name="gender" id="female" />
<label for="female"><span>女</span></label>
</div>
<div class="item">
<span>爱好:</span>
<!-- input:checkbox[name="hobby"]#hobby$^label[for="hobby$"] -->
<input type="checkbox" name="hobby" id="hobby1" />
<label for="hobby1">旅游</label>
<input type="checkbox" name="hobby" id="hobby2" />
<label for="hobby2">摄影</label>
<input type="checkbox" name="hobby" id="hobby3" />
<label for="hobby3">运动</label>
</div>
<div class="item">
<div>
<span>个人简介:</span>
</div>
<textarea name="" id="" style="width: 100%; height: 150px; margin-top: 5px;" ></textarea>
</div>
<div class="item">
<span>上传个人照片:</span>
<input type="file" name="" id="">
</div>
<hr />
<button type="submit" style="display: block; margin: 0 auto">
立即注册
</button>
</form>
</body>
</html>
项目实现
架构
html骨架
1
2
3
4
5
6
7
8
9
10
11<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>修改
title1
<title>表单</title>创建表单
1
2
3
4
5
6
7...
<body>
<form>
<!-- 表单内容 -->
</form>
</body>
...
表单内容
为了方便查看效果, 给表单添加一个样式, 暂时不用理解, 后续在
CSS的学习时就会了解1
2
3<form style="outline: 1px solid; width:320px;">
<!-- 表单内容 -->
</form>内容
根据需求, 我们有七个用户输入项, 分别是: 昵称, 密码, 邮箱, 性别, 爱好, 个人简介以及个人照片还有一个按钮
这里暂且认为是以使得结构更加清晰为目的, 分别用
div标签包裹, 更具体的作用将在对盒模型的学习后理解Emmet语法生成结构:.item 用于指定标签的 class, 这里暂时用不到, div*7也是可以的, 只是作为个人开发习惯预留, 方便后续样式选择器和Js的开发
1
2div.item*7
button:submit补全(手动添加了分割线
hr标签):1
2
3
4
5
6
7
8
9<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<hr>
<button type="submit"></button>输入内容:
1
2
3
4
5
6
7
8
9<div class="item">昵称:</div>
<div class="item">密码:</div>
<div class="item">邮箱:</div>
<div class="item">性别</div>
<div class="item">爱好</div>
<div class="item">个人简介</div>
<div class="item">个人照片</div>
<hr>
<button type="submit">立即注册</button>
文本输入
文本输入
使用
input, 并为密码添加type="password"使得密码输入以密文的形式显示.添加了
span标签包裹文本, 目前仅起到使得结构更清晰的作用, 可以不加.1
2
3
4
5
6
7
8
9
10
11
12<div class="item">
<span>昵称:</span>
<input>
</div>
<div class="item">
<span>密码:</span>
<input type="password">
</div>
<div class="item">
<span>邮箱:</span>
<input>
</div>
选择框
下拉选择框
使用
select+option实现邮箱的下拉选择框1
2
3
4
5
6
7
8
9<div class="item">
<span>邮箱:</span>
<input type="text" />
<select name="" id="">
<option value="">@qq.com</option>
<option value="">@163.com</option>
<option value="">@126.com</option>
</select>
</div>单选框
使用
type="radio"的input标签实现单选框, 通过name属性组合单选框(使得单选约束作用于目标单选框组), 为其中一个选项添加checked以实现默认选中.同样的, 目前所有
span标签都可以忽略或不写, 仅为笔者的个人代码习惯1
2
3
4
5
6
7<div class="item">
<span>性别:</span>
<input type="radio" name="gender" id="" checked />
<span>男</span>
<input type="radio" name="gender" id="" />
<span>女</span>
</div>优化:
为
input添加id属性使用
label标签通过id绑定到对应选项在使用时点击文字也可选中选项, 优化使用体验
1
2
3
4
5
6
7<div class="item">
<span>性别:</span>
<input type="radio" name="gender" id="male" checked />
<label for="male"><span>男</span></label>
<input type="radio" name="gender" id="female" />
<label for="female"><span>女</span></label>
</div>多选框
使用
type="checkbox"的input标签实现多选框Emmet语法生成结构:1
div.class>span{爱好}+(input:checkbox[name="hobby"]#hobby$^label[for="hobby$"])*3结果如下:
1
2
3
4
5
6
7
8
9<div class="item">
<span>爱好:</span>
<input type="checkbox" name="hobby" id="hobby1" />
<label for="hobby1"></label>
<input type="checkbox" name="hobby" id="hobby2" />
<label for="hobby2"></label>
<input type="checkbox" name="hobby" id="hobby3" />
<label for="hobby3"></label>
</div>手动添加文字:
1
2
3
4
5
6
7
8
9<div class="item">
<span>爱好:</span>
<input type="checkbox" name="hobby" id="hobby1" />
<label for="hobby1">旅游</label>
<input type="checkbox" name="hobby" id="hobby2" />
<label for="hobby2">摄影</label>
<input type="checkbox" name="hobby" id="hobby3" />
<label for="hobby3">运动</label>
</div>
多行文本
富文本框
使用
textarea标签实现富文本框1
2
3</div>
<textarea name="" id=""></textarea>
</div>添加样式美化(可选):
1
2
3</div>
<textarea name="" id="" style="width: 100%; height: 150px; margin-top: 5px;" ></textarea>
</div>
文件提交
提交按钮
使用
type="file"的input标签实现文件提交功能1
2
3
4<div class="item">
<span>上传个人照片:</span>
<input type="file" name="" id="">
</div>
分割线
分割标签
1
<hr />
提交表单
提交按钮
使用
type="submit"的button标签实现表单提交:1
2
3<button type="submit">
立即注册
</button>设置样式使其居中:
1
2
3<button type="submit" style="display: block; margin: 0 auto">
立即注册
</button>具体含义学到
css的盒模型后非常好理解简单解释:
display: block;:button元素默认是 行内元素 (inline),margin属性设置为auto将无效, 为了使得以下属性有效, 将按钮设置为块盒margin: 0 auto;: 元素上下外边距为0左右外边距将自动占满父元素
整合
完整表单
最后将各部分简单堆砌即可得到完整表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单</title>
<style>
.item {
margin: 5px;
}
</style>
</head>
<body>
<form
action=""
style="outline: 1px solid; display: block; padding: 10px; width: 320px;">
<div class="item">
<span>昵称:</span>
<input type="text" />
</div>
<div class="item">
<span>密码:</span>
<input type="password" />
</div>
<div class="item">
<span>邮箱:</span>
<input type="text" />
<select name="" id="">
<option value="">@qq.com</option>
<option value="">@163.com</option>
<option value="">@126.com</option>
</select>
</div>
<div class="item">
<span>性别:</span>
<input type="radio" name="gender" id="male" checked />
<label for="male"><span>男</span></label>
<input type="radio" name="gender" id="female" />
<label for="female"><span>女</span></label>
</div>
<div class="item">
<span>爱好:</span>
<!-- input:checkbox[name="hobby"]#hobby$^label[for="hobby$"] -->
<input type="checkbox" name="hobby" id="hobby1" />
<label for="hobby1">旅游</label>
<input type="checkbox" name="hobby" id="hobby2" />
<label for="hobby2">摄影</label>
<input type="checkbox" name="hobby" id="hobby3" />
<label for="hobby3">运动</label>
</div>
<div class="item">
<div>
<span>个人简介:</span>
</div>
<textarea name="" id="" style="width: 100%; height: 150px; margin-top: 5px;" ></textarea>
</div>
<div class="item">
<span>上传个人照片:</span>
<input type="file" name="" id="">
</div>
<hr />
<button type="submit" style="display: block; margin: 0 auto">
立即注册
</button>
</form>
</body>
</html>