DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 輕松玩轉花樣表單
輕松玩轉花樣表單
編輯:CSS進階教程     
  本專題從最基礎的表單知識,到表單的高級應用,讓你有一個比較全面地認識,相信你在讀完本專題以後,一定會對表單非常熟悉。

一、表單概述


  表單,在網頁中的作用不可小視,主要負責數據采集的功能,比如你可以采集訪問者的名字和e-mail地址、調查表、留言簿等等。

1、表單的組成


  一個表單有三個基本組成部分:
  • 表單標簽:這裡面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
  • 表單域:包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
  • 表單按鈕:包括提交按鈕、復位按鈕和一般按鈕;用於將數據傳送到服務器上的CGI腳本或者取消輸入,還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
  為了顧及不同的網頁設計工具,本文只講述代碼的設計,不具體講述操作方法,下面就是表單的HTML代碼設計要點:

1.1 表單標簽<form></form>

  功能:用於申明表單,定義采集數據的范圍,也就是<form>和</form>裡面包含的數據將被提交到服務器或者電子郵件裡。

  語法:<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">. . .</FORM>

  屬性解釋見下表:

action=url指定一來處理提交表單的格式.它可以是一個URL地址(提交給程式)或一個電子郵件地址.method=get或post指明提交表單的HTTP方法.可能的值為:
  1. post:POST方法在表單的主干包含名稱/值對並且無需包含於action特性的URL中.
  2. get:不贊成。GET方法把名稱/值對加在action的URL後面並且把新的URL送至服務器.這是往前兼容的缺省值.這個值由於國際化的原因不贊成使用.
enctype=cdata指明用來把表單提交給服務器時(當method值為"post")的互聯網媒體形式.這個特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的結果文檔顯示的位置:
  1. _blank :在一個新的、無名浏覽器窗口調入指定的文檔;
  2. _self :在指向這個目標的無素的相同的框架中調入文檔;
  3. _parent :把文檔調入當前框的直接的父FRAMESET框中;這個值在當前框沒有父框時等價於_self;
  4. _top :把文檔調入原來的最頂部的浏覽器窗口中(因此取消所有其它框架);這個值等價於當前框沒有你框時的_self.


  例如:
  <form action="http://www.yesky.com/test.asp" method="post" target="_blank">...</form>
  表示表單將向http://www.yesky.com/test.asp以post的方式提交,提交的結果在新的頁面顯示,數據提交的媒體方式是默認的application/x-www-form-urlencoded方式;
1.2 表單域

  表單域包含了文本框、多行文本框、密碼框、隱藏域、復選框、單選框和下拉選擇框等,用於采集用戶的輸入或選擇的數據,下面分別講述這些表單域的代碼格式:

1.2.1 文本框

  文本框是一種讓訪問者自己輸入內容的表單對象,通常被用來填寫單個字或者簡短的回答,如姓名、地址等。
  代碼格式:<input type="text" name="..." size="..." maxlength="..." value="...">

  屬性解釋:
  type="text"定義單行文本輸入框;
  name屬性定義文本框的名稱,要保證數據的准確采集,必須定義一個獨一無二的名稱;
  size屬性定義文本框的寬度,單位是單個字符寬度;
  maxlength屬性定義最多輸入的字符數。
  value屬性定義文本框的初始值

樣例1:

樣例1代碼:

<input type="text" name="example1" size="20" maxlength="15">

1.2.2 多行文本框

  也是一種讓訪問者自己輸入內容的表單對象,只不過能讓訪問者填寫較長的內容。
  代碼格式:<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>
  屬性解釋:
  name屬性定義多行文本框的名稱,要保證數據的准確采集,必須定義一個獨一無二的名稱;
  cols屬性定義多行文本框的寬度,單位是單個字符寬度;
  rows屬性定義多行文本框的高度,單位是單個字符寬度;
  wrap屬性定義輸入內容大於文本域時顯示的方式,可選值如下:

  • 默認值是文本自動換行;當輸入內容超過文本域的右邊界時會自動轉到下一行,而數據在被提交處理時自動換行的地方不會有換行符出現;
  • Off,用來避免文本換行,當輸入的內容超過文本域右邊界時,文本將向左滾動,必須用Return才能將插入點移到下一行;
  • Virtual,允許文本自動換行。當輸入內容超過文本域的右邊界時會自動轉到下一行,而數據在被提交處理時自動換行的地方不會有換行符出現;
  • Physical,讓文本換行,當數據被提交處理時換行符也將被一起提交處理。


樣例2:


  

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved