HTML表單(FORM)標記(TAGS)

來源:互聯網
上載者:User

基本文法

<------Form Basic------->

表單的基本文法

<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>

*=GET, POST


<------Input Basic------->

表單中提供給使用者的輸入形式

<input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script


<--################## Text & Passwd ########################-->

文字輸入和密碼輸入

<------Text & Password------->*=text, password

<input type=*>
<input type=* value=**>

<form action=/cgi-bin/post-query method=POST>您的姓名: <input type=text name=姓名><br>您的首頁的網址: <input type=text name=網址 value=http://><br>密碼: <input type=password name=密碼><br><input type=submit value="發送"><input type=reset value="重設"></form>

您的姓名:
您的首頁的網址:
密碼:


<------Text & Password -- Size, Max ------->

<input type=* size=**>
<input type=* maxlength=**>

<form action=/cgi-bin/post-query method=POST><input type=text name=a01 size=40><br><input type=text name=a02 maxlength=5><br><input type=submit><input type=reset></form>




<--################## Checkbox & Radio ########################-->

複選框(Checkbox) 和 單選框(RadioButton)

<------Checkbox------->

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<form action=/cgi-bin/post-query method=POST><input type=checkbox name=水果1>        Banana<p><input type=checkbox name=水果2 checked>        Apple<p><input type=checkbox name=水果3 value=橘子>        Orange<p><input type=submit><input type=reset></form>

Banana

Apple

Orange


<------Checkbox------->

<input type=radio value=**>
<input type=radio value=** checked>

<form action=/cgi-bin/post-query method=POST><input type=radio name=水果>        Banana<p><input type=radio name=水果 checked>        Apple<p><input type=radio name=水果 value=橘子>        Orange<p><input type=submit><input type=reset></form>

Banana

Apple

Orange


<--################## Image ########################-->

圖象座標

在下面選則一個係數後,在圖象上點一下,就知道什麼是圖象座標了!

<input type=image src=url>

<form action=/cgi-bin/post-query method=POST><input type=image name=face src=http://www.cncms.com.cn/html/f.gif><p><input type=radio name=zoom value=2 checked>x2<input type=radio name=zoom value=4>x4<input type=radio name=zoom value=6>x6<p><input type=reset></form>

x2 x4 x6


<--################## Hidden ########################-->

隱藏表單的元素

<input type=hidden value=*>

<form action=/cgi-bin/post-query method=POST><input type=hidden name=add value=hoge@hoge.jp>Here is a hidden element. <p><input type=submit><input type=reset></form>

Here is a hidden element.


<--################## Select ########################-->

列表框(Selectable Menu)

<------Basic------->

基本文法

<select name=*>
<option> ...
</select>

<------select & option------->

<option selected>
<option value=**>

<form action=/cgi-bin/post-query method=POST><select name=fruits>        <option>Banana        <option selected>Apple        <option value=My_Favorite>Orange</select><p><input type=submit><input type=reset></form>

BananaAppleOrange


<------size & multiple------->

<select size=**>

<form action=/cgi-bin/post-query method=POST><select name=fruits size=3>        <option>Banana        <option selected>Apple        <option value=My_Favorite>Orange        <option>Peach</select><p><input type=submit><input type=reset></form>

BananaAppleOrangePeach


<------multiple------->

<select size=** multiple>

注意,是用 Ctrl 鍵配合滑鼠實現多選。
(和 MS-WINDOWS 的 File Manager 一樣)

<form action=/cgi-bin/post-query method=POST><select name=fruits size=3 multiple>        <option selected>Banana        <option selected>Apple        <option value=My_Favorite>Orange        <option selected>Peach</select><p><input type=submit><input type=reset></form>

BananaAppleOrangePeach


<--################## Textarea ########################-->

文本地區

<textarea name=* rows=** cols=**> ... <textarea>

<form action=/cgi-bin/post-query method=POST><textarea name=comment rows=5 cols=60></textarea><P><input type=submit><input type=reset></form>


<------Word Wrapping Off------->

對於很長的行是否進行換行的設定(Word Wrapping)

<textarea wrap=off> ... </textarea>

不換行,是預設設定。

<------Word Wrapping Soft------->

<textarea wrap=soft> ... </textarea>

“軟換行”,好象 MS-WORD 裡的“軟斷行符號”。

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>

<------Word Wrapping Hard------->

<textarea wrap=hard> ... </textarea>

“硬換行”,好象 MS-WORD 裡的“硬斷行符號”。

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。