Web基本教程~02.表單樣式設計
上一期
表單的介紹
表單在 Web 網頁中用來給訪問者填寫資訊，從而能采集客戶端資訊，使網頁具有互動的功能，一般是將表單設計在一個 Html 檔案中，當用戶填寫完資訊后做submit操作，表單的內容就從客戶端的瀏覽器傳送到服務器上，經過服務器上的程式處理后，再將用戶所需資訊傳送回客戶端的瀏覽器上，這樣網頁就具有了互動性，
表單是由表單和控制元件組成的,一個表單一般應該包含用戶填寫資訊的輸入框,提交按鈕等，這些輸入框,按鈕叫做控制元件,表單很像容器,它能夠容納各種各樣的控制元件，
在這一期只設計表單樣式,表單的具體功能后面才會慢慢知道，
<form action＝"url" method="post" name="my" ></form>
-name：表單提交時的名稱
-action：提交到的地址(如: www.baidu.com)
-method：提交方式，有 get 和 post 兩種，默認為 get
文本框
文本域通過< input type="text" > 標簽來設定，當用戶要在表單中鍵入字母、數字等 內容時，就會用到文本域，當 type = password時,則多用于密碼域
<form>
賬號 : <input type="text" name="username"/> <br/>
密碼 : <input type="password" name="pwd"/>
</form>
單選按鈕
< input type="radio" > 標簽定義了表單單選框選項，但是要注意必須要兩個或者多個input的name一樣才能實作單選的效果
<form>
性別<br/>
<input type="radio" value="男" name="sex"/>
<input type="radio" value="女" name="sex"/>
</form>
復選框
定義了復選框. 用戶需要從若干給定的選擇中選取一個 或若干選項，
<form>
<input type="checkbox" name="foot" value="milk"/>
i like milk
<br/>
<input type="checkbox" name="foot" value="egg"/>
i like egg
</form>
檔案
定義檔案選擇欄位和 "瀏覽..." 按鈕，供檔案上傳
選擇一個檔案: <input type="file" name="img">
隱藏域
定義隱藏欄位，隱藏欄位對于用戶是不可見的，隱藏欄位常常存盤默認值，或者由 JavaScript 改變它們的值
<input type="hidden" name="NullPointException">
重置按鈕
定義重置按鈕（重置所有表單值為默認值）
<input type="reset">
影像圖片按鈕
定義影像作為提交按鈕
<input type="image" src="./img/but.jpg" />
下拉串列
< select > 元素用來創建下拉串列， < option > 標簽定義下拉串列中的一個選項（一個條目），
<select>
<option>士</option>
<option>農</option>
<option>工</option>
<option>商</option>
</select>
< optgroup > 標簽經常用于把相關的選項組合在一起
<select>
<optgroup label="1">
<option>士</option>
<option>農</option>
</optgroup>
<optgroup label="2">
<option>工</option>
<option>商</option>
</optgroup>
</select>
多行文本框
< textarea > 標簽定義一個多行的文本輸入控制元件，文本區域中可容納無限數量的文本， 可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性，
<textarea rows="10" cols="30">
多行文本框
</textarea>
labe
< label > 標簽為 input 元素定義標注（標記）， label 元素不會向用戶呈現任何特殊效果，不過，它為滑鼠用戶改進了可用性，如果您 在 label 元素內點擊文本，就會觸發此控制元件，就是說，當用戶選擇該標簽時，瀏覽器就會 自動將焦點轉到和標簽相關的表單控制元件上， < label > 標簽的 for 屬性應當與相關元素的 id 屬性相同
<form action="demo_form.php">
<label for="egg">
牛奶
</label>
<input type="radio" name="sex" id="egg" value="egg"> <br>
<label for="milk">
雞蛋
</label>
<input type="radio" name="sex" id="milk" value="milk"> <br>
<input type="submit" value="提交">
</form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245238.html
標籤：其他