篇介紹了表單的使用,表單有很多控件,比如輸入框,密碼框、文本域,按鈕等。按類型可分如下:
此類控件有很多種類型,使用<input type="類型">語法,常見類型如下:
type 值 | 含義 |
text | 文字字段 |
password | 密碼域,用戶看不到明文,以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域,用圖像作為背景的提交按鈕 |
hidden | 隱藏域,不可見的輸入框 |
file | 文本域,用于上傳文件等非文本數(shù)據(jù) |
文本輸入框和密碼框
除了顯示形式不一樣,其它屬性一樣,有以下屬性:
如下是文本輸入框和密碼框制作一個(gè)登錄表單
html代碼:
<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用戶名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密碼:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
顯示效果:
HTML5 輸入類型
除了以上幾種類型,HTML5 還增加了多個(gè)新的輸入類型:
如下代碼:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
數(shù)字類型(1 到 5 之間):
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 選擇顏色:
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月:
<input type="month" name="bdaymonth"><br>
年周:
<input type="week" name="week_year"><br>
時(shí)間:
<input type="time" name="usr_time"><br>
一定范圍
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
搜索:
<input type="search" name="googlesearch"><br>
電話:
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 類型。<br>
url:
<input type="url" name="url">
提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
<input type="submit">
</form>
</body>
</html>
效果如下:
單選和多選按鈕
使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選,除了name和value屬性外,單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng),checked = “true”指選中那個(gè)選項(xiàng),表單會(huì)將 checked = “true” 的選型值傳遞給后臺(tái)。
如下實(shí)例:
<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果:
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份:
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form>
</body>
</html>
顯示效果:
單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的,如下會(huì)看到地址欄中的數(shù)據(jù),多選會(huì)發(fā)送多個(gè)值,后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi
普通按鈕、提交按鈕、重置按鈕
普通按鈕:type = “button”,一般配合腳本使用,語法如下:
<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />
value 值就是按鈕在頁面顯示的文字,onclick屬性定義了腳本事件,這里指單擊按鈕時(shí)所進(jìn)行的處理。
如下示例:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
單擊您好按鈕
提交按鈕:type = “submit”,用于提交表單內(nèi)容,是一種特殊按鈕。
如剛才的登錄表單,提交后會(huì)返回結(jié)果:
重置按鈕:type="reset",用于清除表單數(shù)據(jù),也是一種特殊按鈕。
輸入數(shù)據(jù)
點(diǎn)擊重置按鈕后,表單數(shù)據(jù)清空
重置清空數(shù)據(jù)
HTML5 按鈕
除了使用input定義按鈕,還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕,button 使用語法如下:
<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>
其它輸入類控件
隱藏域 —— hidden
文件域 —— file
如下示例:
<form action="/demo/html/action_page.php">
<label for="fname">隱藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form>
顯示效果
可以看到,隱藏域在頁面中不顯示,單擊文件域選擇文件按鈕可以選擇文件,比如word文件,電子表格文件等,會(huì)以非文本方式傳送到后臺(tái)的,常用來實(shí)現(xiàn)文件上傳功能。
除了input 類型的控件,還有文本域 textarea ,一種特殊的文本框,它與input 文本輸入框的區(qū)別就是可以輸入多行文字,input 文本輸入框是單行的無法輸入多行文字。
如下示例:
<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
效果如下:
rows 屬性定義文本域的高度是幾行,cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類似,只不過它更加節(jié)省空間,當(dāng)要選擇的選型很多時(shí),就不適合使用radio空間,所以當(dāng)選項(xiàng)很多的時(shí)候,使用下拉菜單,語法如下:
<select name="名稱">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>
多選列表和多選按鈕類似,一樣為了節(jié)省空間,當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí),使用多選列表,語法如下:
<select name="名稱" size="可看見的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>
多選比下拉菜單不同之處是多了一個(gè)multiple屬性,定義多選的,且表現(xiàn)形式也不一樣,不是下拉而是一個(gè)列表。
如下代碼:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單:<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表:<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
顯示效果:
這里需要注意的是,多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選,效果如下:
到這里,已介紹了大部分的表單控件,現(xiàn)在你可以使用他們制作自己的表單,表單通常在動(dòng)態(tài)網(wǎng)站中使用,這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。
還有許多屬性沒有講到,比如html5新增的一些屬性和功能,可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí),感謝關(guān)注,學(xué)習(xí)愉快!
上篇 : 前端入門——html 表單
下篇: 前端入門 —— 網(wǎng)頁中使用窗口框架
evExpress WinForm擁有180+組件和UI庫(kù),能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForm能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序,無論是Office風(fēng)格的界面,還是分析處理大批量的業(yè)務(wù)數(shù)據(jù),它都能輕松勝任!
注意:目前基于HTML & CSS的控件正在積極研發(fā)中,可以作為技術(shù)預(yù)覽提供,如果需要使用請(qǐng)下載最新版組件體驗(yàn)哦~
DevExpress WinForms Subscription官方最新版免費(fèi)下載試用,歷史版本下載,在線文檔和幫助文件下載-慧都網(wǎng)
一組控件和組件允許開發(fā)人員構(gòu)建HTML格式的UI,并使用CSS樣式自定義UI元素的外觀設(shè)置、大小、填充和布局選項(xiàng),不再需要處理自定義繪制事件或更改大量屬性來修改控件以匹配UI規(guī)范,可以使用HTML和CSS標(biāo)記的知識(shí)為桌面應(yīng)用程序構(gòu)建布局。
在上文中,我們?yōu)榇蠹医榻B了HTML-CSS標(biāo)記的,本文將為大家介紹DevExpress中的HTML-CSS感知控件,有興趣的小伙伴可以下載相關(guān)組件體驗(yàn)。
HtmlContentControl可以從HTML-CSS標(biāo)記構(gòu)建UI的界面。
HtmlContentPopup是HtmlContentControl的彈出窗口版本,該組件從HTML-CSS代碼生成UI,并將其顯示為彈出或模態(tài)窗口。
新的ItemsView沒有默認(rèn)的數(shù)據(jù)表示,它僅從開發(fā)者用屬性或動(dòng)態(tài)地用事件指定的HTML-CSS模板中呈現(xiàn)它的項(xiàng)(數(shù)據(jù)記錄)。
TileView從模板生成它的項(xiàng)(tiles),開發(fā)者可以在常規(guī)模板和基于HTML-CSS的模板之間進(jìn)行選擇。
WinExplorerView支持HTML-CSS模板來構(gòu)建卡片的布局,開發(fā)者可以為每種顯示樣式(超大、大、中、列表、貼片等等)指定HTML-CSS模板,或者動(dòng)態(tài)地使用一個(gè)事件。
GanttControl允許開發(fā)者使用HTML-CSS標(biāo)記來渲染許多元素:
您可以在SchedulerControl中使用基于HTML-CSS的模板來呈現(xiàn)約會(huì)。
標(biāo)準(zhǔn)Visual Studio表單的替代品,為其子控件啟用DirectX硬件加速,并支持基于HTML-CSS的模板。
AlertControl的模板允許呈現(xiàn)現(xiàn)代應(yīng)用程序通知。
開發(fā)人員可以使用基于HTML-CSS的模板來呈現(xiàn)以下控件中的項(xiàng):
AccordionControl允許開發(fā)人員使用HTML-CSS模板來渲染它的UI元素:
頁編程之圖片、隱藏。
同學(xué)們好,這里是免費(fèi)少兒編程知識(shí)分享,每天一行代碼誰都能學(xué)會(huì)。今天分享的知識(shí)是為網(wǎng)頁添加圖片控件和隱藏控件,用到的是input標(biāo)簽的type屬性值,image和hidden。這兩個(gè)控件太過于簡(jiǎn)單,所以我就放在一起講了,同時(shí)介紹了image控件button的image內(nèi)容,以及IMG控件之間的區(qū)別。演示了hidden控件在實(shí)際編程中的作用。
先來看看今天實(shí)例的運(yùn)行效果。網(wǎng)頁上分為兩段。
·第一段中有三張圖片,第一張就是type屬性等于image的效果,第二張是button中包含IMG標(biāo)簽的效果,第三張是純IMG標(biāo)簽的效果。這三張圖片的共同點(diǎn)是圖片完全一致。不同點(diǎn)是type=image,直接將整張圖片做成了提交按鈕,點(diǎn)擊之后即可提交整張表單,但外觀表現(xiàn)時(shí)仍然和普通的圖片是沒有任何差別的。
·第二張是button按鈕中使用了IMG標(biāo)簽,雖然它也有提交和圖片,但是它最外面仍然保留了按鈕的外邊框,看上去是以按鈕為主。
·第三章中直接使用IMG標(biāo)簽,它沒有提交功能就是一普通的圖片,但是我們?nèi)匀豢梢酝ㄟ^JS的submit函數(shù)來使其提交表單。
·第二段是一個(gè)密碼框一個(gè)提交按鈕。這一句話只是為了方便你們找到隱藏空間的位置,我還做了兩個(gè)hidden的隱藏控件,但是你們看不到,我隨便在這里輸入密碼,然后點(diǎn)擊按鈕時(shí),JS就會(huì)取出(密碼)控件的值和隱藏控件中的值并且彈出對(duì)話框提示。
這里有兩點(diǎn)需要注意,可以看到密碼控件中的值在這里仍然是明文顯示的,證明它只是視覺上是*或者圓點(diǎn),實(shí)際在數(shù)據(jù)傳輸中仍然是明文并沒有加密。
·第二點(diǎn)是隱藏控件中的值被成功讀取,看不到并不代表不存在,效果各位同學(xué)都已經(jīng)看到了。
在我們來看看實(shí)現(xiàn)的代碼,先講image值,它的關(guān)鍵屬性就是src和ID,也就是引用地址和命名,沒有什么好講的。我其實(shí)是不建議你們使用這個(gè)控件的,因?yàn)橐话惚韱翁峤磺埃紩?huì)加上一層一層的驗(yàn)證,比如說是必填、b7手勢(shì)、數(shù)字、格式是否正確。這個(gè)時(shí)候除了最基礎(chǔ)的控件類型驗(yàn)證外還會(huì)用到 gs驗(yàn)證。而如果使用 gs驗(yàn)證就需要用到自定義函數(shù),在提交到服務(wù)器前就驗(yàn)證好。
如果用戶數(shù)據(jù)是正確的就提交,如果不正確就終止提交操作提示用戶修改流程,這樣看上去沒有問題,但因image控件討厭也就討厭在這里。
·若用這種方式提交可能會(huì)發(fā)生表單提交兩次的現(xiàn)象,經(jīng)常會(huì)造成表單元素被重復(fù)提交,數(shù)據(jù)庫(kù)被寫入異常,所以盡量不用或者少用。
·至于hidden控件常用來保存一些不需要或者不希望展示給用戶的數(shù)據(jù),他的常用屬性就是無這個(gè)Value和這個(gè)id。
我舉個(gè)例子幫助你們理解,現(xiàn)在客戶要求建立一個(gè)注冊(cè)新用戶的界面,但是要求將注冊(cè)步驟分為兩步。第一步,需要用戶填寫手機(jī)和昵稱,然后跳轉(zhuǎn)至第二頁,輸入密碼和其他的信息,第二頁肯定就不需要顯示出來用戶在第一頁的時(shí)候輸入的數(shù)據(jù)了。但這些數(shù)據(jù)又必須在第二頁的時(shí)候一起提交至服務(wù)器。
這時(shí)候就可以使用到隱藏控件--接收第一頁提交過來的數(shù)據(jù)并且不顯示,用戶也感受不到。直接填好信息提交時(shí)第一頁的數(shù)據(jù)也以隱藏空間的方式一起提交了。這僅僅是hidde空間的一個(gè)使用場(chǎng)景,還可以收集用戶信息、確定用戶身份、判斷提交源,在多個(gè)form表單中建立關(guān)節(jié)聯(lián)、做全局變量等,總的來說應(yīng)用方式還是很廣的。
在目前這個(gè)階段就只需要知道這兩控件能干什么和基礎(chǔ)寫法,計(jì)算完成后面到具體的使用場(chǎng)景時(shí)會(huì)再詳細(xì)講解。
好了,今天的分享就到這里,希望各位同學(xué)下去能夠照著寫三遍,做到不看視頻也能夠?qū)懗鰜恚械陌咐跋嚓P(guān)文檔均可以向我獲取。下期見。網(wǎng)頁編程·服務(wù)端編程·數(shù)據(jù)庫(kù)·算法,點(diǎn)贊點(diǎn)關(guān)注吧!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。