整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
file | 文本域，用于上傳文件等非文本數據 |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個登錄表單
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 還增加了多個新的輸入類型：
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
數字類型（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>
時間：
<input type="time" name="usr_time"><br>
一定范圍
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能夠在被提交時自動對電子郵件地址進行驗證<br>
搜索：
<input type="search" name="googlesearch"><br>
電話：
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 類型。<br>
url：
<input type="url" name="url">
提交時能夠自動驗證 url 字段<br>
<input type="submit">
</form>
</body>
</html>效果如下：
單選和多選按鈕
使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked = “true”指選中那個選項，表單會將 checked = “true” 的選型值傳遞給后臺。
如下實例：
<!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>顯示效果：
單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發送多個值，后臺將會獲取一個數組形式的數據。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按鈕、提交按鈕、重置按鈕
普通按鈕：type = “button”，一般配合腳本使用，語法如下：
<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。
如下示例：
<!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”，用于提交表單內容，是一種特殊按鈕。
如剛才的登錄表單，提交后會返回結果：
重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。
輸入數據
點擊重置按鈕后，表單數據清空
重置清空數據
HTML5 按鈕
除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，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文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。
除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，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 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類似，只不過它更加節省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：
<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：
<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。
如下代碼：
<!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>顯示效果：
這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：
到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。
還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！
上篇 ： 前端入門——html 表單
下篇： 前端入門 —— 網頁中使用窗口框架
evExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForm能完美構建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕松勝任！
注意：目前基于HTML & CSS的控件正在積極研發中，可以作為技術預覽提供，如果需要使用請下載最新版組件體驗哦~
DevExpress WinForms Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網
一組控件和組件允許開發人員構建HTML格式的UI，并使用CSS樣式自定義UI元素的外觀設置、大小、填充和布局選項，不再需要處理自定義繪制事件或更改大量屬性來修改控件以匹配UI規范，可以使用HTML和CSS標記的知識為桌面應用程序構建布局。
在上文中，我們為大家介紹了HTML-CSS標記的，本文將為大家介紹DevExpress中的HTML-CSS感知控件，有興趣的小伙伴可以下載相關組件體驗。
HtmlContentControl可以從HTML-CSS標記構建UI的界面。
HtmlContentPopup是HtmlContentControl的彈出窗口版本，該組件從HTML-CSS代碼生成UI，并將其顯示為彈出或模態窗口。
新的ItemsView沒有默認的數據表示，它僅從開發者用屬性或動態地用事件指定的HTML-CSS模板中呈現它的項(數據記錄)。
TileView從模板生成它的項(tiles)，開發者可以在常規模板和基于HTML-CSS的模板之間進行選擇。
WinExplorerView支持HTML-CSS模板來構建卡片的布局，開發者可以為每種顯示樣式（超大、大、中、列表、貼片等等）指定HTML-CSS模板，或者動態地使用一個事件。
GanttControl允許開發者使用HTML-CSS標記來渲染許多元素：
您可以在SchedulerControl中使用基于HTML-CSS的模板來呈現約會。
標準Visual Studio表單的替代品，為其子控件啟用DirectX硬件加速，并支持基于HTML-CSS的模板。
AlertControl的模板允許呈現現代應用程序通知。
開發人員可以使用基于HTML-CSS的模板來呈現以下控件中的項：
AccordionControl允許開發人員使用HTML-CSS模板來渲染它的UI元素：
頁編程之圖片、隱藏。
同學們好，這里是免費少兒編程知識分享，每天一行代碼誰都能學會。今天分享的知識是為網頁添加圖片控件和隱藏控件，用到的是input標簽的type屬性值，image和hidden。這兩個控件太過于簡單，所以我就放在一起講了，同時介紹了image控件button的image內容，以及IMG控件之間的區別。演示了hidden控件在實際編程中的作用。
先來看看今天實例的運行效果。網頁上分為兩段。
·第一段中有三張圖片，第一張就是type屬性等于image的效果，第二張是button中包含IMG標簽的效果，第三張是純IMG標簽的效果。這三張圖片的共同點是圖片完全一致。不同點是type=image，直接將整張圖片做成了提交按鈕，點擊之后即可提交整張表單，但外觀表現時仍然和普通的圖片是沒有任何差別的。
·第二張是button按鈕中使用了IMG標簽，雖然它也有提交和圖片，但是它最外面仍然保留了按鈕的外邊框，看上去是以按鈕為主。
·第三章中直接使用IMG標簽，它沒有提交功能就是一普通的圖片，但是我們仍然可以通過JS的submit函數來使其提交表單。
·第二段是一個密碼框一個提交按鈕。這一句話只是為了方便你們找到隱藏空間的位置，我還做了兩個hidden的隱藏控件，但是你們看不到，我隨便在這里輸入密碼，然后點擊按鈕時，JS就會取出(密碼)控件的值和隱藏控件中的值并且彈出對話框提示。
這里有兩點需要注意，可以看到密碼控件中的值在這里仍然是明文顯示的，證明它只是視覺上是*或者圓點，實際在數據傳輸中仍然是明文并沒有加密。
·第二點是隱藏控件中的值被成功讀取，看不到并不代表不存在，效果各位同學都已經看到了。
在我們來看看實現的代碼，先講image值，它的關鍵屬性就是src和ID，也就是引用地址和命名，沒有什么好講的。我其實是不建議你們使用這個控件的，因為一般表單提交前，都會加上一層一層的驗證，比如說是必填、b7手勢、數字、格式是否正確。這個時候除了最基礎的控件類型驗證外還會用到 gs驗證。而如果使用 gs驗證就需要用到自定義函數，在提交到服務器前就驗證好。
如果用戶數據是正確的就提交，如果不正確就終止提交操作提示用戶修改流程，這樣看上去沒有問題，但因image控件討厭也就討厭在這里。
·若用這種方式提交可能會發生表單提交兩次的現象，經常會造成表單元素被重復提交，數據庫被寫入異常，所以盡量不用或者少用。
·至于hidden控件常用來保存一些不需要或者不希望展示給用戶的數據，他的常用屬性就是無這個Value和這個id。
我舉個例子幫助你們理解，現在客戶要求建立一個注冊新用戶的界面，但是要求將注冊步驟分為兩步。第一步，需要用戶填寫手機和昵稱，然后跳轉至第二頁，輸入密碼和其他的信息，第二頁肯定就不需要顯示出來用戶在第一頁的時候輸入的數據了。但這些數據又必須在第二頁的時候一起提交至服務器。
這時候就可以使用到隱藏控件--接收第一頁提交過來的數據并且不顯示，用戶也感受不到。直接填好信息提交時第一頁的數據也以隱藏空間的方式一起提交了。這僅僅是hidde空間的一個使用場景，還可以收集用戶信息、確定用戶身份、判斷提交源，在多個form表單中建立關節聯、做全局變量等，總的來說應用方式還是很廣的。
在目前這個階段就只需要知道這兩控件能干什么和基礎寫法，計算完成后面到具體的使用場景時會再詳細講解。
好了，今天的分享就到這里，希望各位同學下去能夠照著寫三遍，做到不看視頻也能夠寫出來，所有的案例及相關文檔均可以向我獲取。下期見。網頁編程·服務端編程·數據庫·算法，點贊點關注吧！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
