前端入門-html 表單控件使用

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數(shù)據(jù)

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標(biāo)簽名稱
maxlength —— 定義文本框可輸入字符最大長(zhǎng)度
size —— 定義文本框在頁面中顯示的長(zhǎng)度
vaule —— 定義文本框中默認(rèn)的值

如下是文本輸入框和密碼框制作一個(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è)新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!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)文件上傳功能。

文本域 —— textarea

除了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)。

HTML-CSS-aware控件

HtmlContentControl

HtmlContentControl可以從HTML-CSS標(biāo)記構(gòu)建UI的界面。

HtmlContentPopup

HtmlContentPopup是HtmlContentControl的彈出窗口版本，該組件從HTML-CSS代碼生成UI，并將其顯示為彈出或模態(tài)窗口。

GridControl的ItemsView

新的ItemsView沒有默認(rèn)的數(shù)據(jù)表示，它僅從開發(fā)者用屬性或動(dòng)態(tài)地用事件指定的HTML-CSS模板中呈現(xiàn)它的項(xiàng)(數(shù)據(jù)記錄)。

GridControl的TileView

TileView從模板生成它的項(xiàng)(tiles)，開發(fā)者可以在常規(guī)模板和基于HTML-CSS的模板之間進(jìn)行選擇。

GridControl的WinExplorerView

WinExplorerView支持HTML-CSS模板來構(gòu)建卡片的布局，開發(fā)者可以為每種顯示樣式（超大、大、中、列表、貼片等等）指定HTML-CSS模板，或者動(dòng)態(tài)地使用一個(gè)事件。

GanttControl

GanttControl允許開發(fā)者使用HTML-CSS標(biāo)記來渲染許多元素：

任務(wù)、摘要和里程碑
定期和匯總?cè)蝿?wù)進(jìn)度
常規(guī)、摘要和里程碑任務(wù)基線
文本標(biāo)簽
交互工具提示
分割的任務(wù)

Scheduler Control

您可以在SchedulerControl中使用基于HTML-CSS的模板來呈現(xiàn)約會(huì)。

DirectX Form

標(biāo)準(zhǔn)Visual Studio表單的替代品，為其子控件啟用DirectX硬件加速，并支持基于HTML-CSS的模板。

Alert Controls

AlertControl的模板允許呈現(xiàn)現(xiàn)代應(yīng)用程序通知。

列表框控件和組合框編輯器

開發(fā)人員可以使用基于HTML-CSS的模板來呈現(xiàn)以下控件中的項(xiàng)：

ListBoxControl, CheckedListBoxControl和 ImageListBoxControl
ComboBoxEdit

Accordion Control

AccordionControl允許開發(fā)人員使用HTML-CSS模板來渲染它的UI元素：

項(xiàng)目和組
頁腳的元素
處于最小化狀態(tài)的元素等

頁編程之圖片、隱藏。

同學(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)注吧！

在線咨詢

上一篇：模板空間｜餐廳美食在線訂餐HTML5站點(diǎn)模板 Bootstrap模板
下一篇：WPS輕松辦公—如何粘貼表格鏈接到文檔

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端入門-html 表單控件使用

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

HTML-CSS-aware控件

HtmlContentControl

HtmlContentPopup

GridControl的ItemsView

GridControl的TileView

GridControl的WinExplorerView

GanttControl

Scheduler Control

DirectX Form

Alert Controls

列表框控件和組合框編輯器

Accordion Control

您的項(xiàng)目需求