XHTML/CSS 網頁表單:5種簡單技術
技術1:標籤三明治
將輸入框,選擇框和文字框全部包含進 label 元素,並全部設定為塊級元素。將單選按鈕和多選框顯示方式設定為 inline 以便於它們在同一行出現。如果你比較喜歡 label 和單選按鈕/多選框出現在不同行,可以選擇不把它包含在 label 裡面,或者使用硬換行處理。
每種情況都在下面展示了。
當這些看起來比較時髦的時候,W3C 事實上已經含蓄地展示了他們的 label 例子。
主要好處:簡單
程式碼:
label, input, select, textarea {display: block;} label {margin-bottom: 10px;} input[type="radio"], input[type="checkbox"] {display: inline;}
<form> <fieldset> <legend>Contact Form</legend> <label for="name"> Name</label> <input id="name" name="name" size="20" /> <label for="email">Email</label> <input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio) — <em>wrapped label</em></label> <input name=" Choice" type="radio" /> Choice 1 <input name=" Choice" type="radio" /> Choice 2 <input name=" Choice" type="radio" /> Choice 3 <label style="margin-bottom: 0pt;" for=" Choices2"> Choices (checkbox) — <em>non-wrapped label, margin reset</em></label> <input name=" Choice2" type="checkbox" /> Choice 1 <input name=" Choice2" type="checkbox" /> Choice 2 <input name=" Choice2" type="checkbox" /> Choice 3 <div style="height: 10px;"> <!-- just to split the demo up --> </div> <label for=" Choices3"> Choices (checkbox) — <em>wrapped, hard line-break</em></label> <input name=" Choice3" type="checkbox" /> Choice 1 <input name=" Choice3" type="checkbox" /> Choice 2 <input name=" Choice3" type="checkbox" /> Choice 3 <label for="dropdown"> Question</label> <select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <label for="message"> Message <textarea cols="36" rows="12" name="message"></textarea> </label> <input type="submit" value="send it" /> </fieldset> </form>
執行結果:
技術2:懶人
許多開發者採用了這種不正統但是快速簡單(用換行隔斷標記)的方法。雖然能執行,但是對你的 css 能力有害,因為你不需要任何 css 去實現它。
主要好處:快速
程式碼:
<form> <fieldset>
<legend>Contact Form</legend>
<label for="name">Name</label> <input id="name" name="name" size="20" />
<label for="email">Email</label> <input id="email" name="email" size="20" />
<label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
<label for="dropdown">Question</label>
<select id="dropdown">
<optgroup label="Group of Options"></optgroup>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<label for="message">Message</label>
<textarea cols="36" rows="12" name="message"></textarea>
<input type="submit" value="send it" />
</fieldset> </form>
執行結果:
技術3:語義先生
web 標準的信條之一就是考慮資料型別和與之對應的程式碼。既然表單是一個連續的問題列表,那麼有序列表用在這裡就非常貼切。
*主要好處: *結構化
程式碼:
ol { list-style: none; padding-left: 0; }
<form> <fieldset>
<legend>Contact Form</legend>
<ol>
<li> <label for="name">Name</label> <input id="name" name="name" size="20" /></li>
<li> <label for="email">Email</label> <input id="email" name="email" size="20" /></li>
<li>
<label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
</li>
<li>
<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
</li>
<li>
<label for="dropdown">Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option> </select>
</li>
<li>
<label for="message">Message</label><textarea cols="36" rows="12" name="message"></textarea>
</li>
<li> <input type="submit" value="send it" /> </li>
</ol>
</fieldset>
</form>
執行結果:
技術4:分而治之
假如你採取將橫向表單,需要何種形式?很多情況(客戶)會要求橫向表單。我們可以依賴的是老夥伴 div,只需要把表單分割成多欄。利用標籤三明治方法我們可以很容易的實現。
主要好處:空間的利用
程式碼:
label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
.form-column { width: 150px; height: 250px; padding-left: 20px; border-left: 1px solid #ccc; float: left; }
<form> <fieldset>
<legend>Contact Form</legend>
<div class="form-column">
<label for="name"> Name</label> <input id="name" name="name" size="20" />
<label for="email"> Email</label> <input id="email" name="email" size="20" />
<label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
</div>
<!-- /form-column -->
<div class="form-column">
<label for=" Choices3"> Choices (radio)</label>
<input name=" Choice2" type="radio" /> Choice 1
<input name=" Choice2" type="radio" /> Choice 2
<input name=" Choice2" type="radio" /> Choice 3
<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice2" type="checkbox" /> Choice 1
<input name=" Choice2" type="checkbox" /> Choice 2
<input name=" Choice2" type="checkbox" /> Choice 3
<label for="dropdown"> Question</label>
<select id="dropdown">
<optgroup label="Group of Options"></optgroup>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit" value="send it" />
</div>
<!-- /form-column -->
</fieldset> </form>
執行結果:
技術5:老學究似的懶人
如果你不想糾纏與 CSS,非常匆忙,並且不打算做瀏覽器測試,你應該另外找個新工作。玩笑而已,這個是為你準備的。
主要好處:直觀
程式碼:
<form>
<fieldset>
<legend>Contact Form</legend>
<table border="0">
<tbody>
<tr>
<!-- column one -->
<td>
<label for="name">Name</label>
<input id="name" name="name" size="20" />
<label for="email">Email</label>
<input id="email" name="email" size="20" />
<label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
</td>
<!-- column two -->
<td>
<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
<label for="dropdown">Question</label>
<select id="dropdown">
<optgroup label="Group of Options"></optgroup>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
<!-- column three -->
<td>
<label for="message">Message</label>
<input type="submit" value="send it" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
執行結果:
相關推薦
XHTML/CSS 網頁表單:5種簡單技術
技術1:標籤三明治 將輸入框,選擇框和文字框全部包含進 label 元素,並全部設定為塊級元素。將單選按鈕和多選框顯示方式設定為 inline 以便於它們在同一行出現。如果你比較喜歡 label 和單選按鈕/多選框出現在不同行,可以選擇不把它包含在 label 裡面,或者使用硬換行處理。
【HTML&CSS】HTML表單:實現互動
瀏覽器通過HTML表單和伺服器實現互動,表單是一個可供使用者輸入資訊的頁面,使用者提交表單後,表單包含的資訊會發送到一個Web伺服器,由伺服器指令碼負責處理並響應,返回一個HTML頁面,最後瀏覽器顯示這個頁面。 表單元素 <form> 所有表單
提交表單的4種方式
demo1 doc type function pat 相對 dem location cti 1,超鏈接 <!-- 鏈接到page2 --> <a href="page2.jsp">鏈接到page2</a><br> <
js控制 按enter進行搜索或提交表單:
cti search onkeydown var 點擊 ear win doc all js控制 按enter進行搜索或提交表單://按enter 進行搜索document.onkeydown = function(e){ var ev = document.all
Mvc 提交表單的4種方法全程詳解
c4346 數字 parameter words 代碼 help pro reat src 一,MVC HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){}
習慣了CS回車操作人員,操作BS網頁表單也是回車666
按鈕 index blur 提示 type clear 其他 efault sel 1.第一步把表單,裏面需要回車的input,或者是其他的表單按鈕給一個clsss,例如下面的$(‘.cls‘); 2.第二步, 把下面的代碼復制過去,填寫完最後一個自動提交:$("#sav
利用JS提交表單的幾種方法和驗證(必看篇)
www contain 功能 ner ble 四種 利用 comm pac 第一種方式:表單提交,在form標簽中增加onsubmit事件來判斷表單提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
【轉載】form表單的兩種提交方式,submit和button的用法
按鈕 type ssid login false tex .get ons 轉載 1.當輸入用戶名和密碼為空的時候,需要判斷。這時候就用到了校驗用戶名和密碼,這個需要在jsp的前端頁面寫;有兩種方法,一種是用submit提交。一種是用button提交。方法一:在jsp的前端
雙飛翼頁面布局與網頁表單的制作
輸入 單選 div 項目 一起 形狀 action 頁面 提交 雙飛翼布局 基本的頁面布局 首先建立三個塊級元素,全部設定高度,中間的塊級元素按照顯示屏幕的寬度百分百設定,左右兩個塊級元素設定相同的寬度。 其次將三個塊級元素依次設定漂浮效果,通過設置外框邊距(margin
CSS實現垂直居中的5種方法
logo cto 溢出 hover 元素垂直居中 OS num -o com 利用 CSS 來實現對象的垂直居中有許多不同的方法,比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麽來創建一個好的居中網站。 使用 CSS 實現垂直居中並不容易。有些方法在一些瀏
CSS網頁布局:盒子模型
spa 舉例 IE add 分享圖片 http ID 一個 back 一、盒子模型 標準盒子模型(W3C盒子) 不論是標準盒模型還是IE盒子模型,都有content、padding、border、margin四個部分組成,但從上圖也可以看出W3C盒子和IE盒子主要
利用正則表達式限制網頁表單裏的文本框輸入內容
利用 replace 只能輸入數字 bsp filter TE red pan 代碼 利用正則表達式限制網頁表單裏的文本框輸入內容 將以下代碼放入輸入框就可以了。 (1)用正則表達式限制只能輸入中文:onkeyup="value=value.replace(/[^\u4E0
Form表單的幾種提交方式
text ucc ram rip sub javascrip reg data 方式 <script type="text/javascript"> $(function() { //1、ajax提交 $("#ajaxBtn").click(function
網站開發之MyEclipse簡單實現JSP網頁表單提交及傳遞值
本文主要是作者《中小型網站開發與設計》課程的內容,非常基礎的文章,主要是指導學生學會用MyEclipse實現JSP網頁表單提交及傳遞引數。希望大家喜歡這篇文章,基礎文章,不喜勿噴~ 一. MyEclipse實現網頁動態表單提交 1.新建Web Service工程,名稱為te
ajax上傳表單的倆種方式
1.用h5物件上傳表單(圖片) var formData = new FormData(); formData.append("authenticity_token", '1212121212'); formData.append("file[context]", "zxcvx
JSP-詳細總結form表單:name= method=post(get) action=
(學習語言:JSP) 文章目錄 name="form" method=post (或get) get方法 post方法 對比【表格】 `action="___.jsp"`
後端模擬網頁表單提交資料
/// <summary> /// 後端模擬網頁表單提交資料 /// </summary> /// <returns></returns> public string TestFor
jsp的form表單提交幾種方式
1.form表單submit直接提交資料 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/j
css製作表單
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
CSS——(CSS樣式規則,CSS樣式表單,選擇器,常用的CSS屬性)
CSS(Cascading Style Sheets,層疊樣式表單)是由W3C所提出,主要的用途是控制網頁的外觀,也就是定義網頁的編排,顯示,格式化及特殊效果,有部分功能與HTML重疊。 1.CSS樣式規則與選擇器 CSS樣式表單是由一條一條的樣式規則(st