html旅程之輸入欄位控制項，旅程域控制項
在html的學習中，我們會遇到很多控制項的學習。其中有一類叫做輸入欄位的控制項，可以承載使用者輸入的資料，也可以通過html改變資料的傳遞方式，或者它本身的樣式。
我們可以根據性質將該類控制項分為：文本型、按鈕型、選擇型、隱含域四個小類，由於篇幅問題這裡先介紹前三種類型。
前三類中每一種控制項與VB控制項的對應關係表示為：
一、文本型
這種類型的控制項都是以文本的形式呈現，可以直接將使用者輸入的文本資料承載下來，然後進行傳遞。
1.form：表單
主要屬性有：action、method（get和post）、type、name.
PS：get和post的區別
1. get是從伺服器上擷取資料，post是向伺服器傳送資料。
2. get是把參數資料隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個欄位一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。特別是在超連結的跳轉時，get方法會將相應的URL地址直接載入到目前頁面所在的網址之後，組成字串的串連。而post的過程會直接實現頁面跳轉，地址欄的網址不發生任何的變化，所以使用者看不見這個過程。
3. 對於get方式，伺服器端用Request.QueryString擷取變數的值，對於post方式，伺服器端用Request.Form擷取提交的資料。
4. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。
2.text：文字框
在該控制項中，我們可以通過id來唯一標識控制項，通過name來設定控制項的名稱，value可以設定控制項的值（預設或者顯示的值），size設定文字框的長度，maxsize設定最大長度。下面使用一段代碼來驗收總結：
<span style="font-size:18px;"><html><head> <title>示範text輸入欄位</title> <!--設定該介面顯示的標題 --></head><body><h1>示範text</h1><hr><form action ="12.html" method="get"> 姓名：<input type="text"> <br> <!--預設類型為文字框，也可設定為text型 -->年齡：<input type="text" name="age"><br><input type="submit" value="儲存"> </form></body></html></span>註：當我們文字框為密碼項時，需要設定相應屬性，使密碼非原碼顯示則：
3.textarea：文本說明域
它的形狀和功能類似listBox控制項，可以存放大量的文本資料，而textarea可以通過rows和cols的屬性設定行和列。
二、按鈕型
1.reset
也就是我們VB程式用到的“清空”按鈕，而往日要實現的這種清空效果在html中只是對type屬性的設定：
<span style="font-size:18px;"> <input type="submit" value="儲存(submit)"><br> <!--提交按鈕--><input type="button" value="儲存（button）"><br> <!--普通按鈕--><input type="reset" value="儲存（reset）"><br> <!--重設類的按鈕--><input type="image" src=""> <!--圖片按鈕--></span>這四種按鈕控制項都是通過type屬性的設定實現的，其中image和VB中的image控制項一樣，type=“button”的是最普通的按鈕。
三、選擇型
1.radio：單選框
單選框實現的前提是：所有的單選框name一致，否則將和多選框是一樣的效果。
2.checkBox：複選框
3.selected
這是下拉式清單的控制項，也就是vs中用到的combox控制項。預設情況下，我們只能選擇下拉項中的一個，但是當我們設定multiple屬性之後我們就可以實現多選的效果：
<span style="font-size:18px;"> <select name="language" multiple > <option value="01">C語言</option><option value="02">VB</option> <option value="03">C#</option><option value="04">delphi</option></select></span>
儘管html是BS中的知識，而VB是剛入學就學過的“舊知識”，但html完全可以看做是VB的一種衍生品：通過更改個別屬性控制項便可以實現同樣的效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
