-
Notifications
You must be signed in to change notification settings - Fork 2
/
task_2_32.html
139 lines (117 loc) · 5.89 KB
/
task_2_32.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>task_2_32</title>
<style>
#data_create fieldset :nth-of-type(n+3){display:none;}
/* 根据类型的className来显示对于的模块表单 */
#data_create .select~#box_item,
#data_create .checkbox~#box_item,
#data_create .radio~#box_item,
#data_create .textarea~#length_control,
#data_create .input~.password~#length_control,
#data_create .input~.text~#length_control,
#data_create .input~#rule_input{display:block;}
/* 设置的表单的样式 */
#form_data_set{width:300px;float:left;}
#form_data_set fieldset{margin-top:20px;}
#form_data_set label{display:inline-block;margin-top:8px;font-size:14px;margin-right:8px;}
#form_data_set #lable_box{width:200px;}
#rule_input label,
#type_box label{width:64px;margin:0;}
#length_control input{width:20%;}
#add_btn{margin-top:20px;width:80px;height:30px;background-color:rgb(59,153,252);color:#fff;border:none;font-size:16px;border-radius:8px;}
/* 展示的表单的样式 */
#form_box{margin:0 40px 0 340px;min-width:600px;padding:0 0 20px 0;border:1px solid #000;border-radius:10px;}
#title{text-align:center;color:rgb(59,153,252);}
#result{width:400px;margin:20px auto;position:relative;}
#result .radio_box input{width:auto;height:auto;text-align:left;}
#result .radio_box label{display:inline-block;position:static;width:auto;margin-right:10px;}
#result input{width:100%;height:30px;outline:none;border:1px solid rgb(199,199,199);border-radius:8px;}
#result .radio_box label:first-child,
#result label{display:block;text-align:right;position:absolute;width:300px;left:-320px;margin-top:4px;}
#result .style2 div{margin-top:10px;width:300px;position:relative;}
#result .style2 span{top:0;display:block;position:absolute;text-align:left;margin-top:4px;right:-350px;width:320px;}
#result span{display:block;width:100%;margin-bottom:20px;margin-top:8px;font-size:14px;color:rgb(193,193,193);}
#result .true{color:rgb(39,198,82);border-color:rgb(39,198,82);}
#result .formNameLabel{color:#000;}
#result .error{color:red;border-color:red;}
#result :first-child[id=submit_form]{display:none;}
#submit_form{margin-top:20px;width:80px;height:30px;background-color:rgb(59,153,252);color:#fff;border:none;font-size:16px;border-radius:8px;outline:none;}
/* 单选框 多选框 下拉框选项输入框的样式 */
#box_item_show{display:flex;justify-content:center;flex-wrap:wrap;margin:20px;}
#box_item input{display:block;width:100%;margin:0 auto;}
.item{height:20px;background-color:red;color:#fff;margin:5px;padding:5px 10px;cursor:pointer;}
.item > span{transition:width 0.2s linear;display:inline-block;width:0;height:16px;overflow:hidden;}
.item :hover>span{transition:width 0.2s linear;width:64px;height:16px;}
.item :hover{background-color:blue;}
.hide{display:none;}
</style>
</head>
<body>
<aside id="form_data_set">
<form id="data_create">
<fieldset class="input" id="type_box">
<legend>类型</legend>
<input checked name="data_type" id="input" type="radio">
<label for="input">输入框</label>
<input name="data_type" id="radio" type="radio">
<label for="radio">单选框</label>
<input name="data_type" id="checkbox" type="radio">
<label for="checkbox">多选框</label>
<input name="data_type" id="select" type="radio">
<label for="select">下拉框</label>
<input name="data_type" id="textarea" type="radio">
<label for="textarea">文本域</label>
</fieldset>
<fieldset class="necessary" id="basic_box">
<legend>配置</legend>
<label>名称：</label><input id="lable_box" type="text" value="姓名">
<input name="data_need" id="necessary" checked type="radio">
<label for="necessary">必填</label>
<input name="data_need" id="unnecessary" type="radio">
<label for="unnecessary">选填</label>
<label>样式</label>
<select id="select_box">
<option>样式一</option>
<option>样式二</option>
</select>
</fieldset>
<fieldset class="text" id="rule_input">
<legend>规则</legend>
<input checked name="data_rule" id="text" type="radio">
<label for="text">文字</label>
<input name="data_rule" id="number" type="radio">
<label for="number">数字</label>
<input name="data_rule" id="email" type="radio">
<label for="email">邮箱</label>
<input name="data_rule" id="phone" type="radio">
<label for="phone">电话号码</label>
<input name="data_rule" id="password" type="radio">
<label for="password">密码</label>
</fieldset>
<fieldset id="box_item">
<legend>选项</legend>
<input id="box_item_input" placeholder="可用空格，逗号，回车来分隔选项" />
<span id="box_item_show"></span>
</fieldset>
<fieldset id="length_control">
<legend>长度限制</legend>
<label>字符范围：</label><input id="min_length" type="number" min="0" value="4">
<span>--</span>
<input id="max_length" type="number" min="1" value="16">
</fieldset>
<button id="add_btn" type="button">add</button>
</form>
</aside>
<div id="form_box">
<h1 id="title">表单展示区</h1>
<form id="result" class="style1">
<button type="button" id="submit_form">提交</button>
<input type="text" class="hide">
</form>
</div>
<script src="scripts/task_2_31.js"></script>
</body>
</html>