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>

總結

以上是生活随笔為你收集整理的Web全栈~02.表单样式设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。