我教女朋友学编程Html系列(6)—Html常用表单控件
生活随笔
收集整理的這篇文章主要介紹了
我教女朋友学编程Html系列(6)—Html常用表单控件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
做過網頁的人都知道，html表單控件十分重要?；旧衔覀冏詴T、登錄用戶，都需要填寫用戶名、密碼，那些框框都是表單控件。
本來今天就想寫一些常用的html表單控件，于是開始搜資料，找到了一個網頁，作者的寫作思路和我的基本相同，不過不足的是缺少效果圖。
我打算結合著這位仁兄的文章補充一下，增加一些效果圖，另外把一些新內容也補充進去， 點擊打開原文
我站在這位仁兄的肩膀上寫作，再增加一些東西，配上一些圖，我想，效果應該很好，接著就跟著我來學習吧。
HTML表單(Form)是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。
效果圖如下：
? ? ? ??
? ? ? ? ? ? ?
學習HTML表單(Form)最關鍵要掌握的有三個要點：
表單控件(Form Controls)
Action
Method
先說表單控件(Form Controls)，通過HTML表單的各種控件，用戶可以輸入文字信息，或者從選項中選擇，以及做提交的操作。比如上面的例句里，input type="text"就是一個表單控件，表示一個單行輸入框。
?
用戶填入表單的信息總是需要程序來進行處理，表單里的action就指明了處理表單信息的文件。比如上面例句里的action="http://www.php100.com/a.php"。代表的就是把這個表單中的信息提交到a.php這個后臺程序中處理。(注: php是一門編寫后臺程序的語言)
?
至于method，表示了發送表單信息的方式。method有兩個值：get和post。
get的方式是將表單控件的name/value信息經過編碼之后，通過URL發送(你可以在地址欄里看到)。
比如：http://www.baidu.com/s?name=jinhe&boy=1，這里就把參數name(值為jinhe)和boy(值為1)傳遞給了百度，參數和網址之前使用【?問號】間隔，各個參數之間使用&分割。
而post則將表單的內容通過http發送，你在地址欄看不到表單的提交信息。
那什么時候用get，什么時候用post呢？一般是這樣來判斷的，如果只是為取得和顯示數據，用get；一旦涉及數據的保存和更新，那么建議用post。
HTML表單(Form)常用控件有：
一、
表單控件(Form Control)：單行文本輸入框(input type="text")
單行文本輸入框允許用戶輸入一些簡短的單行信息，比如用戶姓名。例句如下：
<html><head><title>輸入用戶姓名</title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/yourname.php" method="get">請輸入你的姓名：<input type="text" name="yourname"><input type="submit" value="提交"></form></body></html>
效果圖如下：
?
二、
表單控件(Form Control)：復選框(input type="checkbox")
復選框允許用戶在一組選項里，選擇多個。示例代碼：
<html><head><title>選擇</title></head><body>請選擇你喜歡的水果：<br><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"><input type="checkbox" name="fruit" value ="apple" >蘋果<br><input type="checkbox" name="fruit" value ="orange" checked="checked">桔子<br><input type="checkbox" name="fruit" value ="mango">芒果<br><input type="submit" value="提交"></form></body></html>
說明：
1， ??
注意這3個復選框有個共同的特點，name="fruit"，也就是說它們的name是相同的，這就告訴了瀏覽器，它們3個是一組的。
如果有另外一組復選框，那么就需要指定另外一個name。具體如何區分組，主要看你想干什么，比如你先問你喜歡的水果有哪些(蘋果、桔子、芒果，這是一組)，然后你又想問你喜歡的國家有哪些(英國、美國、日本，這又是一組，就應該和前一組設置不同的name)。
2，
屬性value是這個復選框的值，一般會通過腳本來獲取選中的復選框的值。
跟在input后面的文字，是顯示給用戶看的，可以說是“復選框的代表的意思”，它可以和value相同，也可以不同。
3，
從效果圖中可以看到，“桔子”這一個復選框選中了，這是因為它對應的input中增加了一個屬性checked="checked"，通過這個屬性，可以設置復選框為默認選中狀態。
三、
表單控件(Form Control)：單選框(input type="radio")
使用單選框，讓用戶在一組選項里只能選擇一個。示例代碼：
<html><head><title>選擇</title></head><body>請選擇你最喜歡的水果：<br><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"><input type="radio" name="fruit" value = "Apple">蘋果<br><input type="radio" name="fruit" value = "Orange" checked="checked">桔子<br><input type="radio" name="fruit" value = "Mango">芒果<br><input type="submit" value="提交"></form></body></html>
效果圖如下：
說明：
1，
注意這3個單選框有個共同的特點，name="fruit"，也就是說它們的name是相同的，這就告訴了瀏覽器，它們3個是一組的。
如果有另外一組單選框，那么就需要指定另外一個name。
如果你不指定name，那么瀏覽器就認為所有的單選框都是一組，這樣你就只能選擇一個單選框，不行的話你可以試試看。
2，
屬性value是這個單選框的值，一般會通過腳本來獲取選中的單選框的值。
跟在input后面的文字，是顯示給用戶看的，可以說是“單選框的代表的意思”，它可以和value相同，也可以不同。
3，
從效果圖中可以看到，“桔子”這一個單選框選中了，這是因為它對應的input中增加了一個屬性checked="checked"，通過這個屬性，可以設置單選框為默認選中狀態。
四、
表單控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做單選，也可以用做復選。單選例句如下：
<html><body><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post">你最喜歡的水果是：<select name="fruit" ><option value="apple">蘋果<option value="orange" selected="selected">桔子</option><option value="mango">芒果</select><input type="submit" value="提交"></form></body></html>
說明：
1，
一個下拉框就有一個name，不過一般都是設置id，然后使用腳本來獲取它的被選中的值。
2，
仔細看的話，會發現，蘋果直接跟在option后面，而桔子的后面還有個閉合的標簽</option>，一般我們寫程序都是使用后者，不知道IE6、IE7、IE8是否支持前者。
3，
如果桔子沒有加selected="selected"，那么默認選中的就是第一個選項“蘋果”，因此可以使用selected="selected"來設置默認選擇項。
如果要變成復選，加muiltiple即可。用戶用Ctrl來實現多選。用戶還可以用size屬性來改變下拉框(Select)的大小。例句：
<html><head><title>選擇</title></head><body><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post">你最喜歡的水果是：<br><select name="fruit" multiple size = "5"><option value="apple">蘋果<option value="orange">桔子<option value="mango">芒果</select><br><input type="submit" value="提交"></form></body></html>
效果圖如下：
說明：
1，
這種用法雖然比較少，不過有時確實很管用，select加一個multiple就行了。
2，
屬性size指的是預留幾個選項的空間，這里設置了size=”5”，看圖可知，已經有了3個選項，下面的位置正好夠2個選項。
如果實際的選項個數比較多，就會出現一個滾動條。
五、
表單控件(Form Control)：多行輸入框(textarea)
多行輸入框(textarea)主要用于輸入較長的文本信息。例句如下：
<html><head><title>請提寶貴意見</title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/suggest.php" method="get">請提寶貴意見：<br><textarea name="yoursuggest" cols ="50" rows = "3"></textarea><br><input type="submit" value="提交"></form></body></html>
效果圖如下：
?
說明：
1，
其中cols表示textarea的寬度，單位是字符，一個英文字母占一個字符，一個漢字占兩個字符，這個常識要記住，這里cols=”50”就是可以輸入25個漢字或50個英文字母。
rows表示textarea的高度，單位是行。這里設置rows=”3”只是預留了3行的空間，如果輸入的內容超過了3行，就會增加一個滾動條。
六、
表單控件(Form Control)：密碼輸入框(input type="password")
密碼輸入框(input type="password")主要用于一些保密信息的輸入，比如密碼。因為用戶輸入的時候，顯示的不是輸入的內容，而是黑點符號。例句如下：
<html><head><title>輸入用戶姓名和密碼 </title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/userpw.php" method="post">請輸入你的姓名：<input type="text" name="yourname"><br>請輸入你的密碼：<input type="password" name="yourpw"><br><input type="submit" value="提交"></form></body></html>
效果圖：
說明：
可以從截圖中看出來，密碼文本框輸入之后就是黑點點，防止偷窺啊。
七、
表單控件(Form Control)：提交(input type="submit")，重置(input type="reset")，按鈕(input type="button")。
通過提交(input type=submit)可以將表單(Form)里的信息提交給表單里action所指向的文件。
重置(input type="reset")可以清空文本框中的值。
按鈕(input type="button")用的是最多的，一般會配合腳本使用。
例句如下：
<html><head><title>輸入用戶姓名和密碼 </title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/userpw.php" method="post">請輸入你的姓名：<input type="text" name="yourname"><br>請輸入你的密碼：<input type="password" name="yourpw"><br><input type="submit" value="提交"> <br><input type="reset" value="重置"> <br><input type="button" οnclick="alert('誰叫你單擊我勒？')" value="按鈕"></form></body></html>
效果圖如下：
說明：
1， ??
當你單擊提交的時候，提示“403 Forbidden”，其實頁面已經把數據提交到了action指定的頁面，因此頁面會轉向其他頁面。
可能是因為沒有權限，或者這個頁面根本不存在，所以才會報錯誤的。
2，
單擊重置，你會發現，輸入文本框中的值被清空了。
3，
單擊按鈕，彈出提示“誰叫你單擊我勒？”，這是因為οnclick="alert('誰叫你單擊我勒？')"， 屬性onclick可以指定當按鈕被單擊時，要執行的動作，一般通過腳本來寫程序完成，這里的alert是一個腳本函數，就是讓瀏覽器彈出一個提示框，內部的內容應該用單引號包住。
八、
表單控件(Form Control)：圖片提交(input type="image")
input type=image 相當于 input type=submit，不同的是，input type=image 以一個圖片作為表單的提交按鈕，其中 src 屬性表示圖片的路徑。
代碼如下：
<html><head><title>輸入用戶姓名</title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/yourname.php" method="get">請輸入你的姓名：<input type="text" name="yourname"><br><input type="image" src ="lp.jpg"alt = "提交" NAME="imagesubmit"></form></body></html>
效果圖如下：
?這里，我把羅胖的頭像當做按鈕了，只要單擊羅胖的頭像，就會提交這個頁面。
本來今天就想寫一些常用的html表單控件，于是開始搜資料，找到了一個網頁，作者的寫作思路和我的基本相同，不過不足的是缺少效果圖。
我打算結合著這位仁兄的文章補充一下，增加一些效果圖，另外把一些新內容也補充進去， 點擊打開原文
我站在這位仁兄的肩膀上寫作，再增加一些東西，配上一些圖，我想，效果應該很好，接著就跟著我來學習吧。
HTML表單(Form)是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。
舉個簡單的例子，一個讓用戶輸入姓名的HTML表單(Form)。示例代碼如下：
<html><head><title>輸入用戶姓名</title></head><body><form action="http://www.php100.com/a.php" method="get">請輸入你的姓名：<input type="text" name="yourname"><input type="submit" value="提交"></form></body></html>效果圖如下：
? ? ? ??
? ? ? ? ? ? ?
學習HTML表單(Form)最關鍵要掌握的有三個要點：
表單控件(Form Controls)
Action
Method
先說表單控件(Form Controls)，通過HTML表單的各種控件，用戶可以輸入文字信息，或者從選項中選擇，以及做提交的操作。比如上面的例句里，input type="text"就是一個表單控件，表示一個單行輸入框。
?
用戶填入表單的信息總是需要程序來進行處理，表單里的action就指明了處理表單信息的文件。比如上面例句里的action="http://www.php100.com/a.php"。代表的就是把這個表單中的信息提交到a.php這個后臺程序中處理。(注: php是一門編寫后臺程序的語言)
?
至于method，表示了發送表單信息的方式。method有兩個值：get和post。
get的方式是將表單控件的name/value信息經過編碼之后，通過URL發送(你可以在地址欄里看到)。
比如：http://www.baidu.com/s?name=jinhe&boy=1，這里就把參數name(值為jinhe)和boy(值為1)傳遞給了百度，參數和網址之前使用【?問號】間隔，各個參數之間使用&分割。
而post則將表單的內容通過http發送，你在地址欄看不到表單的提交信息。
那什么時候用get，什么時候用post呢？一般是這樣來判斷的，如果只是為取得和顯示數據，用get；一旦涉及數據的保存和更新，那么建議用post。
HTML表單(Form)常用控件有：
一、
表單控件(Form Control)：單行文本輸入框(input type="text")
單行文本輸入框允許用戶輸入一些簡短的單行信息，比如用戶姓名。例句如下：
<html><head><title>輸入用戶姓名</title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/yourname.php" method="get">請輸入你的姓名：<input type="text" name="yourname"><input type="submit" value="提交"></form></body></html>
效果圖如下：
?
二、
表單控件(Form Control)：復選框(input type="checkbox")
復選框允許用戶在一組選項里，選擇多個。示例代碼：
<html><head><title>選擇</title></head><body>請選擇你喜歡的水果：<br><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"><input type="checkbox" name="fruit" value ="apple" >蘋果<br><input type="checkbox" name="fruit" value ="orange" checked="checked">桔子<br><input type="checkbox" name="fruit" value ="mango">芒果<br><input type="submit" value="提交"></form></body></html>
效果圖如下：
說明：
1， ??
注意這3個復選框有個共同的特點，name="fruit"，也就是說它們的name是相同的，這就告訴了瀏覽器，它們3個是一組的。
如果有另外一組復選框，那么就需要指定另外一個name。具體如何區分組，主要看你想干什么，比如你先問你喜歡的水果有哪些(蘋果、桔子、芒果，這是一組)，然后你又想問你喜歡的國家有哪些(英國、美國、日本，這又是一組，就應該和前一組設置不同的name)。
2，
屬性value是這個復選框的值，一般會通過腳本來獲取選中的復選框的值。
跟在input后面的文字，是顯示給用戶看的，可以說是“復選框的代表的意思”，它可以和value相同，也可以不同。
3，
從效果圖中可以看到，“桔子”這一個復選框選中了，這是因為它對應的input中增加了一個屬性checked="checked"，通過這個屬性，可以設置復選框為默認選中狀態。
三、
表單控件(Form Control)：單選框(input type="radio")
使用單選框，讓用戶在一組選項里只能選擇一個。示例代碼：
<html><head><title>選擇</title></head><body>請選擇你最喜歡的水果：<br><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post"><input type="radio" name="fruit" value = "Apple">蘋果<br><input type="radio" name="fruit" value = "Orange" checked="checked">桔子<br><input type="radio" name="fruit" value = "Mango">芒果<br><input type="submit" value="提交"></form></body></html>
效果圖如下：
說明：
1，
注意這3個單選框有個共同的特點，name="fruit"，也就是說它們的name是相同的，這就告訴了瀏覽器，它們3個是一組的。
如果有另外一組單選框，那么就需要指定另外一個name。
如果你不指定name，那么瀏覽器就認為所有的單選框都是一組，這樣你就只能選擇一個單選框，不行的話你可以試試看。
2，
屬性value是這個單選框的值，一般會通過腳本來獲取選中的單選框的值。
跟在input后面的文字，是顯示給用戶看的，可以說是“單選框的代表的意思”，它可以和value相同，也可以不同。
3，
從效果圖中可以看到，“桔子”這一個單選框選中了，這是因為它對應的input中增加了一個屬性checked="checked"，通過這個屬性，可以設置單選框為默認選中狀態。
四、
表單控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做單選，也可以用做復選。單選例句如下：
<html><body><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post">你最喜歡的水果是：<select name="fruit" ><option value="apple">蘋果<option value="orange" selected="selected">桔子</option><option value="mango">芒果</select><input type="submit" value="提交"></form></body></html>
效果圖如下：
說明：
1，
一個下拉框就有一個name，不過一般都是設置id，然后使用腳本來獲取它的被選中的值。
2，
仔細看的話，會發現，蘋果直接跟在option后面，而桔子的后面還有個閉合的標簽</option>，一般我們寫程序都是使用后者，不知道IE6、IE7、IE8是否支持前者。
3，
如果桔子沒有加selected="selected"，那么默認選中的就是第一個選項“蘋果”，因此可以使用selected="selected"來設置默認選擇項。
如果要變成復選，加muiltiple即可。用戶用Ctrl來實現多選。用戶還可以用size屬性來改變下拉框(Select)的大小。例句：
<html><head><title>選擇</title></head><body><form action = "http://www.php100.com/html/asdocs/html_tutorials/choose.php" method = "post">你最喜歡的水果是：<br><select name="fruit" multiple size = "5"><option value="apple">蘋果<option value="orange">桔子<option value="mango">芒果</select><br><input type="submit" value="提交"></form></body></html>
效果圖如下：
說明：
1，
這種用法雖然比較少，不過有時確實很管用，select加一個multiple就行了。
2，
屬性size指的是預留幾個選項的空間，這里設置了size=”5”，看圖可知，已經有了3個選項，下面的位置正好夠2個選項。
如果實際的選項個數比較多，就會出現一個滾動條。
五、
表單控件(Form Control)：多行輸入框(textarea)
多行輸入框(textarea)主要用于輸入較長的文本信息。例句如下：
<html><head><title>請提寶貴意見</title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/suggest.php" method="get">請提寶貴意見：<br><textarea name="yoursuggest" cols ="50" rows = "3"></textarea><br><input type="submit" value="提交"></form></body></html>
效果圖如下：
?
說明：
1，
其中cols表示textarea的寬度，單位是字符，一個英文字母占一個字符，一個漢字占兩個字符，這個常識要記住，這里cols=”50”就是可以輸入25個漢字或50個英文字母。
rows表示textarea的高度，單位是行。這里設置rows=”3”只是預留了3行的空間，如果輸入的內容超過了3行，就會增加一個滾動條。
六、
表單控件(Form Control)：密碼輸入框(input type="password")
密碼輸入框(input type="password")主要用于一些保密信息的輸入，比如密碼。因為用戶輸入的時候，顯示的不是輸入的內容，而是黑點符號。例句如下：
<html><head><title>輸入用戶姓名和密碼 </title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/userpw.php" method="post">請輸入你的姓名：<input type="text" name="yourname"><br>請輸入你的密碼：<input type="password" name="yourpw"><br><input type="submit" value="提交"></form></body></html>
效果圖：
說明：
可以從截圖中看出來，密碼文本框輸入之后就是黑點點，防止偷窺啊。
七、
表單控件(Form Control)：提交(input type="submit")，重置(input type="reset")，按鈕(input type="button")。
通過提交(input type=submit)可以將表單(Form)里的信息提交給表單里action所指向的文件。
重置(input type="reset")可以清空文本框中的值。
按鈕(input type="button")用的是最多的，一般會配合腳本使用。
例句如下：
<html><head><title>輸入用戶姓名和密碼 </title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/userpw.php" method="post">請輸入你的姓名：<input type="text" name="yourname"><br>請輸入你的密碼：<input type="password" name="yourpw"><br><input type="submit" value="提交"> <br><input type="reset" value="重置"> <br><input type="button" οnclick="alert('誰叫你單擊我勒？')" value="按鈕"></form></body></html>
效果圖如下：
說明：
1， ??
當你單擊提交的時候，提示“403 Forbidden”，其實頁面已經把數據提交到了action指定的頁面，因此頁面會轉向其他頁面。
可能是因為沒有權限，或者這個頁面根本不存在，所以才會報錯誤的。
2，
單擊重置，你會發現，輸入文本框中的值被清空了。
3，
單擊按鈕，彈出提示“誰叫你單擊我勒？”，這是因為οnclick="alert('誰叫你單擊我勒？')"， 屬性onclick可以指定當按鈕被單擊時，要執行的動作，一般通過腳本來寫程序完成，這里的alert是一個腳本函數，就是讓瀏覽器彈出一個提示框，內部的內容應該用單引號包住。
八、
表單控件(Form Control)：圖片提交(input type="image")
input type=image 相當于 input type=submit，不同的是，input type=image 以一個圖片作為表單的提交按鈕，其中 src 屬性表示圖片的路徑。
代碼如下：
<html><head><title>輸入用戶姓名</title></head><body><form action="http://www.php100.com/html/asdocs/html_tutorials/yourname.php" method="get">請輸入你的姓名：<input type="text" name="yourname"><br><input type="image" src ="lp.jpg"alt = "提交" NAME="imagesubmit"></form></body></html>
效果圖如下：
?這里，我把羅胖的頭像當做按鈕了，只要單擊羅胖的頭像，就會提交這個頁面。
總結
以上是生活随笔為你收集整理的我教女朋友学编程Html系列(6)—Html常用表单控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： K：汉诺塔问题
- 下一篇： 受欢迎的牛（有向图的强连通分量）