表單項介紹

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6head
>
7<
body
>812
1314
19<
form 
action
="target.html"
>
2024
2529
<
fieldset
>
3031
32<
legend
>使用者資訊
legend
>
3334
3546
51<
label 
for="um"
>使用者名稱
label
>
52<
input 
id="um"
type
="text"
name
="username"
/>
<
br /><
br />
5354
58<
label 
for="pwd"
>密碼 
label
>
59<
input 
id="pwd"
type
="password"
name
="password"
/>
<
br /><
br />
60fieldset
>
6162
<
fieldset 
>
6364
<
legend
>使用者愛好
legend
>
6566
76             性別  <
input 
type
="radio"
name
="gender"
value
="male"
id="male"
/><
label 
for="male"
>男
label
>
77<
input 
type
="radio"
name
="gender"
value
="female"
checked
="checked"
id="female"
/><
label 
for="female"
>女
label
>
78<
br /><
br />
7980
84             愛好     <
input 
type
="checkbox"
name
="hobby"
value
="zq"
/>
足球85
<
input 
type
="checkbox"
name
="hobby"
value
="lq"
/>
籃球86
<
input 
type
="checkbox"
name
="hobby"
value
="ymq"
checked
="checked"
/>
羽毛球87
<
input 
type
="checkbox"
name
="hobby"
value
="ppq"
checked
="checked"
/>
桌球88
<
br /><
br />
8990
fieldset
>
9192
100你喜歡的明星 
101<
select 
name
="star"
>
102103
108<
optgroup 
label
="女明星"
>
109110
<
option 
value
="fbb"
>范冰冰
option
>
111<
option 
value
="lxr"
>林心如
option
>
112<
option 
value
="zw"
>趙薇
option
>
113optgroup
>
114115
<
optgroup 
label
="男明星"
>
116<
option 
value
="zbs"
selected
="selected"
>趙本山
option
>
117<
option 
value
="ldh"
>劉德華
option
>
118<
option 
value
="pcj"
>潘長江
option
>
119optgroup
>
120121
select
>
122123
<
br /><
br />
124125
128             自我介紹  <
textarea 
name
="info"
>
textarea
>
129130
<
br /><
br />
131132
137<
input 
type
="submit"
value
="註冊"
/>
138139
143<
input 
type
="reset"
/>
144145
149<
input 
type
="button"
value
="按鈕"
/>
150151
156<
br /><
br />
157<
button 
type
="submit"
>提交
button
>
158<
button 
type
="reset"
>重置
button
>
159<
button 
type
="button"
>按鈕
button
>
160161
form
>
162body
>
163html
>

使用者名稱密碼

使用者愛好

性別  男

女愛好足球籃球羽毛球桌球

林心如趙薇

趙本山劉德華

潘長江自我介紹

提交重置

按鈕

表單項 內聯表單

form class form inline div class form group label for exampleinputname2 name label input type text class form control id exampleinputname2 placeholder...

表單項 水平排列

form class form horizontal div class form group label for inputemail3 class col sm 2 control label email label div class col sm 10 input type email cl...

ElementUI動態增減表單項

增加新選項 增加新選項 const option export default rules answers options methods 將keys歸位 for let i 0 i this.formdata.optionslist.length i 將答案歸位 單選 this.formdata....