您現在的位置是:電腦技術吧?>? 故障問題 ??>??表單標簽是,html表單樣式??>??正文詳情

表單標簽是,html表單樣式

敬運鴻2019-11-16 14:50:45 人圍觀
簡介html5表單input[表單目的]對于一般的網頁設計初學者來說,表單功能并不常用,因為表單必須使用CGI、JavaScript或ASP程序來操作,否則單靠表單沒有多大意義。但是,一旦html制作表單

【表單的用途】  對于一般的網頁設計初學者而言,表單功能其實并不常用,因為表單通常必須配合著CGI、JAVA Script程式或是ASP程式來運作,不然表單單獨存在的意義并不大。

不過,一旦有機會將表單運用到網頁中時,您的網頁將擺脫單向呈現,而開始邁入和使用者互動的階段喔!  本單元純粹以介紹各式表單為主,至于一些CGI或ASP觀念在此我就不提出了,因為提供零碎的觀念,倒不如去看看專門介紹CGI的書籍來的妥當。

  【各種輸入類型】  文字輸入列:每個表單之所以會有不同的類型,原因就在于TYPE=表單類型設定的不同而已,我們就先來看看第一個類型:文字輸入列。

文字輸入列的形態就是TYPE=TEXT,其使用方法如下:

  其有下列可設定之屬性:  NAME=名稱,是設定此一欄位的名稱,程式中常會用到。

  SIZE=數值,是設定此一欄位顯現的寬度。

  VALUE=預設內容,是設定此一欄位的預設內容。

  ALIGN=對齊方式,是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。

  MAXLENGTH=數值,是設定此一欄位可設定輸入的最大長度。

  單選核取表單:利用TYPE=RADIO就會產生單選核取表單,單選核取表單通常是好幾個選項一起擺出來供使用者點選,一次只能從中選一個,故為單選核取表單。

  其有下列可設定之屬性:  NAME=名稱,是設定此一欄位的名稱,程式中常會用到。

  VALUE=內容,是設定此一欄位的內容、值或是意義。

  ALIGN=對齊方式,是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。

  CHECKED,是設定此一欄位為預設選取值。

  復選核取表單:利用TYPE= CHECKBOX 就會產生復選核取表單,復選核取表單通常是好幾個選項一起擺出來供使用者點選,一次可以同時選好幾個,故為復選核取表單。

  其有下列可設定之屬性:  NAME=名稱,是設定此一欄位的名稱,程式中常會用到。

  VALUE=內容,是設定此一欄位的內容、值或是意義。

  ALIGN=對齊方式,是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。

  CHECKED,是設定此一欄位為預設選取值。

  密碼表單:利用TYPE= PASSWORD 就會產生一個密碼表單,密碼表單和文字輸入表單長得幾乎一樣,差別就在于密碼表單在輸入時全部會以星號來取代輸入的文字,以防他人偷窺。

  其有下列可設定之屬性:  NAME=名稱,是設定此一欄位的名稱,程式中常會用到。

  SIZE=數值,是設定此一欄位顯現的寬度。

  VALUE=預設內容,是設定此一欄位的預設內容,不過呈現出來仍是星號。

  ALIGN=對齊方式,是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。

  MAXLENGTH=數值,是設定此一欄位可設定輸入的最大長度。

  送出按鈕:通常我們表單填完之后,都會有一個送出按鈕以及清除重寫的按鈕,分別是利用TYPE= SUBMIT 及TYPE= RESET 來產生,相當的簡單易用。

  其有下列可設定之屬性:  NAME=名稱,是設定此一按鈕的名稱。

  VALUE=文字,是設定此一按鈕上要呈現的文字,若是沒有設定,瀏覽器也會自動替您加上送出查詢、重設等字樣。

  ALIGN=對齊方式,是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。

  按鈕元件:表單中或是JAVA SCRIPT常會用到按鈕來作一些效果,因此,我們可以利用TYPE= BUTTON 來產生一個按鈕,相當簡單。

  其有下列可設定之屬性:  NAME=名稱,是設定此一按鈕的名稱。

  VALUE=文字,是設定此一按鈕上要呈現的文字。

  ALIGN=對齊方式,是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。

  隱藏欄位:表單中有時有些東西因為某些因素,不想讓使用者看到,但因程式需要卻又不得不存在,此時,我們就可以利用TYPE= HIDDEN 來產生一個隱藏的欄位。

  其有下列可設定之屬性:  NAME=名稱,是設定此一欄位的名稱。

  VALUE=文字,是設定此一欄位的值、文字或意義。

  【大量文字輸入元件】  有時候我們會希望讓使用者輸入比較大量的文字,此時,文字輸入列就顯得不敷使用,因此我們就可以利用來產生一個可以輸入大量文字的元件,夾在兩個標簽中的文字會出現在框框中,可作為預設文字。

  其有下列可設定之屬性:  NAME=名稱,是設定此一欄位的名稱。

  WRAP=設定值,是設定此一欄位的換行模式。

設定值有三種:OFF(輸入文字不會自動換行)、VIRTUAL(輸入文字在熒幕上會自動換行,不過若是使用者沒有自行按下ENTER換行,送出資料時,也視為沒有換行)、PHYSICAL(輸入文字會自動換行,送出資料時,會將熒幕上的自動換行,視為換行效果送出)。

  COLS=數值,是設定此一欄位的行數(橫向字數)。

  ROWS=數值,是設定此一欄位的列數(垂直字數)。

  【下拉式選單】  下拉式選單令整個網頁看起來有很專業的感覺,我們只要利用便可以產生一個下拉式選單,另外,還需要配合標簽來產生選項,這樣才算完整喔!   其有下列可設定之屬性:  SIZE=數值,是設定此一欄位的大小,預設值為1,若是您的選項有四個,然后您將SIZE設成4,那么,下拉式選單便會變成選項方塊,將四個選項一起呈現在方塊中。

  MULTIPLE,是設定此一欄位為復選,可以一次選好幾個選項。

版權聲明:本文由 敬運鴻 整理編輯。

原標題:表單怎么做,什么是表單

轉載注明出處:http://www.dn9ww09s.icu/fault/12863.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • markdown筆記是什么,markdown做筆記

    markdown筆記是什么,markdown做筆記 相關圖片markdown是什么威志筆記是一個非常容易使用的筆記軟件。偉志筆記是一款專注于高效工作筆記的移動應用,也是中國唯一的云筆記產品。很多用戶不知道降價可以用來了解筆記印象筆記...

  • 容器排污閥怎么設置,容器被重新設置大小

    容器排污閥怎么設置,容器被重新設置大小 相關圖片權限設置并未向在應用程序容器設置容器的文本行為將替換具有指定內容的頁面上的現有容器。頁面上的容器引用任何可以包含文本或其他元素的HTML元素;指定的內容可以包含任何有效...

  • mxfq,mxfq怎么用

    mxfq,mxfq怎么用 相關圖片類似mxfq的xp模塊經常使用Android手機的用戶對mxfq并不陌生。Mxfq是QQ聊天工具的一個小版本。它可以和QQ結合使用,但是它的窗口很小,而且還可以設置為透明,這不會影響q酷安...

  • 天貓積分獲得,如何快速獲得天貓積分

    天貓積分獲得,如何快速獲得天貓積分 相關圖片天貓積分怎么來的當買家在天貓購物時,會得到一定數量的天貓積分。以前,天貓積分可以用來扣除購買金額,但后來這個功能被取消了,天貓積分可以用來兌換積分權益,兌換天貓購...

  • 女人的顏色,美女

    女人的顏色,美女 相關圖片給點顏色就發這篇文章不是讓你看這篇文章來做這個效果,而是給你一些啟發。我不想再叫這個教程了。我只想和你分享我的一些感受。也許你可以發現你需要什么來添加你獨特的想法...

  • 怎么解綁手機令牌,怎樣解綁qq手機令牌

    怎么解綁手機令牌,怎樣解綁qq手機令牌 相關圖片怎么解綁令牌手機代幣是我們確保騰訊賬戶安全的法寶。當賬戶被消費或被盜時,它可以被大量使用。手機代幣只能用來保護騰訊賬戶的安全。一。用戶可按QQ順序登錄個人安全中心qq怎...

  • 網站背景圖,背景圖

    網站背景圖,背景圖 相關圖片優質背景圖高清幾乎所有的設計師都知道在網頁設計中使用圖形的重要性,但是在實際的項目中,如何做好圖片設計呢?本文將與大家分享如何通過把握圖片的意圖來做好設計給設計師...

  • 聲道切換,左右聲道切換

    聲道切換,左右聲道切換 相關圖片耳機聲道怎么設置完美解碼是一款沒有廣告的強大播放器,深受廣大用戶的喜愛。然而,一些新用戶不知道如何切換語言,也不知道如何切換頻道,所以當他們遇到一些多語言版本的電...

  • 才華與美貌,美貌與才華并存

    才華與美貌,美貌與才華并存 相關圖片美貌與才華于一身的女子網頁設計師面臨的最大挑戰之一可能是平衡網站的功能性和可視性。你說,我也想成為“極簡主義者”和“高個子”。但如果沒有紅色按鈕,用戶就不知道在哪...

  • wechat如何發音,wechat 翻譯

    wechat如何發音,wechat 翻譯 相關圖片wechatexe是什么意思微信現在是很多人聊天和支付的必備工具,而一些用戶發現身邊的一些人手機上沒有微信,只有微信。微信是什么意思?微信和微信有什么區別wechat fet是什么意思...

熱評文章

  • 黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎

    黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎 相關圖片用了黑鯊裝機大師重啟不了當您需要重新安裝計算機系統時,網絡上有許多一鍵式安裝工具,非常容易使用。黑鯊安裝大師就是其中之一。它是一款簡單方便的系統重裝軟件,可以快速...

  • 賽博加速器用不了,賽博加速器好用嗎

    賽博加速器用不了,賽博加速器好用嗎 相關圖片賽博加速器激活碼怎么用賽博加速器是網絡游戲加速器的一個很好的應用,特別是當玩家玩外服游戲時,他們特別喜歡使用賽博加速器。如何使用塞伯坦?使用塞伯坦很容易。啟動Cybe...

  • 一鍵啟動,一鍵啟動按了沒反應

    一鍵啟動,一鍵啟動按了沒反應 相關圖片無鑰匙啟動啟動頁面也被稱為flash screen,它已經開始出現在越來越多的本地化應用程序中。現在,越來越多的應用程序將啟動頁面作為必要的UI組件添加到了它們的產品中。無鑰匙啟動怎...

  • win7激活密匙,win7旗艦版密匙

    win7激活密匙,win7旗艦版密匙 相關圖片windows7怎么激活密匙Win7是目前使用最廣泛的Windows操作系統版本。有時我們會遇到系統重新安裝或從其他版本修改為win7,但win7需要激活才能正常使用。為了讓更多的用戶體驗如何查看w...

  • 炫酷發光壁紙,炫酷

    炫酷發光壁紙,炫酷 相關圖片免費炫酷特效主題CSS3制作了很酷的自定義發光文本。本文共享一個基于純CSS3的文本發光效果。當我們將鼠標移到文本上時,文本將模擬發光動畫,顯示非常酷的發光圖片。另外,由于字...

  • 泡泡加速器怎么收費,泡泡加速器畫質設置

    泡泡加速器怎么收費,泡泡加速器畫質設置 相關圖片泡泡加速器登不上網絡游戲加速器現在是每個人玩網絡的必備工具。但網絡游戲加速器的價格要比普通加速器貴一點。如果你想省錢,可以試試泡沫加速器。泡泡加速器是許多網吧使用...

  • htmlinput屬性,html input標簽屬性

    htmlinput屬性,html input標簽屬性 相關圖片html input value在沒有電腦、電視、手機和交通工具的兩天之后,我習慣了這樣嘈雜的節奏,然后又回到了這樣干凈的環境。就像洗衣服一樣,但同時我有點害怕,好像什么也做不了。如果...

  • 抖音事件視頻mp4資源共享,下載枓音視頻

    抖音事件視頻mp4資源共享,下載枓音視頻 相關圖片抖音短視頻有很多關于自助餐的有趣視頻。我想把它們下載到我的本地收藏中。不過,有些用戶還是不知道如何下載視頻,即使下載了,也會發現里面還有些煩人的水?=Yang Yang的抖音怎...

  • 20個分鏡頭范例,文字稿本范例

    20個分鏡頭范例,文字稿本范例 相關圖片采訪分鏡頭腳本范例個人網站有很多用途,包括市場營銷、求職、個人品牌推廣、創意表達,或者只是與同行交流。與社交媒體或企業門戶相比,個人網站作為一個發布平臺往往更加自...

  • excel每頁都打印表尾,excel表頭固定打印

    excel每頁都打印表尾,excel表頭固定打印 相關圖片excel每頁固定表頭在日產的工作和學習中,excel是我們總結數據的重要工具。有時當我們需要打印excel時,需要在每一頁上都有一個標題,這樣我們才能更直觀地看到情況。Excel打電子表格...

關注微信

变脸官网查询