Web基本教程~02.表單樣式設計

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章