當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

4.表单样式

發(fā)布時(shí)間：2024/8/1 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 4.表单样式小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

????? ? 在寫表單的時(shí)候經(jīng)常會(huì)用到"<form>"但是卻很少有人關(guān)注邊框的問(wèn)題.<fieldset>

范例:定義邊框

<form><fieldset><legend>信息顯示表單</legend><ul><li>百度一下</li><li>搜購(gòu)一下</li><li>谷歌一下</li></ul></fieldset></form>

效果

范例:定義表單

????? ? 效果圖

? ? 表單里面一定有許多的表單控件,所以在Bootstrap里面也針對(duì)于表單控件進(jìn)行各種樣式的支持

范例:實(shí)現(xiàn)下拉列表

<div class="container"><form action="" method="post" class="form-horizontal"><fieldset id=""><legend>用戶地址</legend><div class="form-group"><label class="col-lg-2 control-label" for="province">省份:</label><div class="col-md-3"><select name="province" id="province" class="form-control"><option value="001">河南省</option><option value="003">北京</option><option value="002">廣州</option></select></div><label class="col-lg-2 control-label" for="crity">城市</label><div class="col-md-3"><select name="crity" id="crity" class="form-control"><option value="001">洛陽(yáng)</option><option value="003">北京</option><option value="002">廣州</option></select></div></div><div class="form-group"><div class="col-md-5 col-md-offset-2"><button type="submit" class="btn btn-danger">留言</button><button type="reset" class="btn btn-primary">重置</button></div></div></fieldset></form></div>????? ? 所有的控件都可以使用".form-control"樣式定義顯示風(fēng)格

????? ? 單選框和復(fù)選框在定義的時(shí)候必須在組建上外加一個(gè)層元素,在這個(gè)層元素里面設(shè)置使用的樣式.

總結(jié)

以上是生活随笔為你收集整理的4.表单样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。