零基礎(chǔ)學(xué)習(xí)HTML背景表單單選按鈕復(fù)選框上傳文件下拉列表

TML 背景

設(shè)置背景顏色<body bgcolor="#000000">

設(shè)置背景圖片<body background="bg.jpg">

設(shè)置頁面文字顏色<body text="#cccccc">

顏色屬性值有三種值的格式

1，英文單詞，比如 red , yellow ,green …

2, 十六進制表示方式，#開頭，6個十六進制的字符或數(shù)字組合

比如：#FFFFFF，#000000，#CCCAAA，#22BCAD

十六進制： 0-9 和 a-f

3, RGB模式，紅 0-255，綠 0-255，藍 0-255

比如： RGB(120,33,234)

HTML 表單

表單是一個包含表單元素的區(qū)域。

表單能夠包含 input 元素，textarea、select、fieldset、legend 和 label 元素。

表單使用標簽（<form>）定義。

表單用于向服務(wù)器傳輸數(shù)據(jù)。

表單的結(jié)構(gòu)

用戶名：<input type="text" name="uname" />

密碼：<input type="password" name="passwd" />

</form>

屬性說明

name表單的名稱

action表單提交地址

method表單數(shù)據(jù)提交的方式（get ,post）

enctypeMIME類型

target打開方式

input標簽

屬性說明

typeinput元素類型

nameinput 元素的名稱

valueinput 元素的值

sizeinput 元素的寬度

readonly是否只讀

maxlength輸入字符的最大長度

disabled是否禁用

1.文本框

2.密碼框

3.單選按鈕

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

4.復(fù)選框

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

<input type="checkbox"name="love"value="music" checked="checked"/> 聽音樂

<input type="checkbox"name="love" value="movie"/> 看電影

<input type="checkbox"name="love" value="game"/> 玩游戲

5.按鈕

6. 隱藏域

隱藏域用于在程序發(fā)送沒有必要讓用戶看到特定值的時候使用。

7. 上傳文件

注：利用這項功能時，在 form 標簽中要指定method屬性。要把method 指定為post, enctype屬性指定為 multipart/form-data。

<textarea> 多行文本框

屬性說明

name元素的名稱

rows指定文本框的高度

cols指定文本框的寬度

select下拉列表框

<option value="0">請選擇</option

</select>

屬性說明

name下拉列表框的名稱

size下拉列表框的顯示行數(shù)

multiple是否多選

disabled是否禁用

selected設(shè)置默認選中的選項

value選項的值

optgroup標簽

optgroup 元素用于組合選項。

屬性說明

label指定組合選項名稱

fieldset標簽

fieldset 標簽作用是把表單中元素組合起來

<legend></legend> length為字符長度

</fieldset>

label標簽

lable 標簽的作用是將輸入項或選項及其標簽文字關(guān)聯(lián)起來。

拉菜單的屬性

length 表示選項<option>的個數(shù)

selected 布爾值,表示選項<option>是否被選中

SelectedIndex 被選中的選項序號,如果沒有被選中則為-1,對于多選下拉菜單而言,返回被選中的第一個選項序號。從0開始計數(shù)

text 選項的文本(它是option專有的屬性)

value 選項的value值

type 下拉菜單的類型。單選返回select-one,多選返回select-multiple

options 獲取選項的數(shù)組，列如oSelectBox.options[2]表示下拉菜單oSelectBox中的第3項

訪問選中項

下拉菜單(單選):

<html>
<head>
<title>下拉菜單，單選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
-->
</style>
<script language="javascript">
function checkSingle(){
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.constellation;
    var iChoice = oSelectBox.selectedIndex; //獲取選中項
    alert("您選中了" + oSelectBox.options[iChoice].text); //下拉菜單，單選
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看選項" />
</form>
</body>
</html>

下拉菜單(多選):

<html>
<head>
<title>下拉菜單，多選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
margin:0px; padding:2px;
}
-->
</style>
<script language="javascript">
function checkMultiple(){
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var aChoices = new Array();
//遍歷整個下拉菜單
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被選中
aChoices.push(oSelectBox.options[i].text); //壓入到數(shù)組中,可以用于單選的情況;
alert("您選了：" + aChoices.join()); //輸出結(jié)果
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation" multiple="multiple" style="height:180px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看選項" />
</form>
</body>
</html>

通用的訪問下拉菜單選中項的方法:

<script language="javascript">
function getSelectValue(Box){ //Box參數(shù)select標簽的ID值
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.elements[Box]; //根據(jù)參數(shù)相應(yīng)的選擇下拉菜單
    if(oSelectBox.type == "select-one"){ //判斷是單選還是多選
    var iChoice = oSelectBox.selectedIndex; //獲取選中項
    alert("單選，您選中了" + oSelectBox.options[iChoice].text);
    }else{
    var aChoices = new Array();
    //遍歷整個下拉菜單
    for(var i=0;i<oSelectBox.options.length;i++)
    if(oSelectBox.options[i].selected) //如果被選中
    aChoices.push(oSelectBox.options[i].text); //壓入到數(shù)組中
    alert("多選，您選了：" + aChoices.join()); //輸出結(jié)果
    }
}
</script>

函數(shù)使用方法:

<select id="constellation1" name="constellation1">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看選項" />

添加、替換、刪除選項

通過構(gòu)造函數(shù)Option()直接添加value、text等信息，相當方便

var oOption = new Option(text,value,defaultSelected,selected)

defaultSelected為布爾型值:1(true)設(shè)置下拉式表單默認值,

selected為布爾值:1(true)表示被選中

最后兩項默認值為0,如果不希望添加的選項被默認選中則可以忽略,添加選項時通常將<select>列表的第length項直接設(shè)置為新的選項,即在末尾增加。

添加選項：

<html>
<head>
<title>添加選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box){ //添加選項，參數(shù)為<select>標簽的ID值
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length] = oOption; //在菜單末尾添加選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball');" />
</form>
</body>
</html>

替換選項

如果下拉菜單中的序號為已經(jīng)存在了的選項,添加時則會自動替換原有的選項

oBox.options[iNum]=oOption;//替換iNum個選項

<html>
<head>
<title>替換選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function ReplaceOption(Box,iNum){ //替換選項,參數(shù)Box為<select>的ID值,iNum為替換的選項序號;
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[iNum] = oOption; //替換第iNum個選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="籃球替換為乒乓球" onclick="ReplaceOption('ball',1);" />
</form>
</body>
</html>

添加選項到具體位置

<html>
<head>
<title>添加到具體位置</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box,iNum){
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball',1);" />
</form>
</body>
</html>

以上代碼IE7中雖然在正確的位置插入了選項,但內(nèi)容卻沒有顯示出來(bug問題)

兼容性更好的代碼,使用方法與以上相同;

<script language="javascript">
function AddOption(Box,iNum){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    //兼容IE7，先添加選項到最后，再移動
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>

注意：IE9已經(jīng)解決了bug問題

刪除下拉菜單的選項:

刪除下拉菜單中的某個選項時相對最簡單的,只需要將這個選項設(shè)置為null即可

bBox.options[iNum]=null;

單元素屬性2

為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學(xué)有所成！吸引人的東西未必珍貴。

昨天我們學(xué)習(xí)了《HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（目錄在結(jié)尾），大家通過學(xué)習(xí)對HTML頁面中的表單元素的基本寫法已經(jīng)非常熟悉了。同時也學(xué)會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續(xù)學(xué)習(xí)新的表單內(nèi)容。

建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調(diào)頻旋鈕是對應(yīng)角度對應(yīng)相應(yīng)調(diào)頻，不可能一個角度對應(yīng)兩個調(diào)頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。

示例代碼如下：

<form>
  最高學(xué)歷：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>碩士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  <input type = "submit" value = "submit"/>
</form>

因為描寫的是最高學(xué)歷，一般人最高學(xué)歷只有一個，不可能又是學(xué)士又是博士，因此使用單選表單。

向服務(wù)器提交時，name叫做"education"（教育），value對應(yīng)不同層次。

頁面效果如下：

大家可以點點試試，每次只能有一個被選中。如圖：

綜合練習(xí)：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>表單 </title>
  </head> 
  <body>
  <form>
  會員名稱：
  <input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
  會員密碼：
  <input type = "text" placeholder = "請輸入英文字母、特殊符號、數(shù)字" name="passWord"/><br>
  確認密碼：
  <input type = "text" name="confirmPassWord"/><br>
  <input type = "submit" value = "提交"/><br>
  </form>
  <hr>
  <form>
  興趣愛好：
  <br>
  <input type = "checkbox" name = "hobby" value = "reading"/>讀書
  <input type = "checkbox" name = "hobby" value = "film"/>電影
  <input type = "checkbox" name = "hobby" value = "painting"/>繪畫
  <input type = "checkbox" name = "hobby" value = "music"/>音樂
  <br>
  最高學(xué)歷：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>碩士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  <input type = "submit" value = "submit"/>
  </form>
  </body>
  </html>

頁面效果如下：

密碼輸入：我們在使用上述表單輸入密碼時發(fā)現(xiàn)，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：

如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：

會員密碼：
<input type = "password" placeholder = "請輸入英文字母、特殊符號、數(shù)字" name="passWord"/><br>
確認密碼：
<input type = "password" name="confirmPassWord"/><br>

頁面效果如下：

上傳文件：使用type="file"可以上傳文件！

示例代碼如下：寫在"submit"的上面即可。

<input type = "file"/><br><input type = "submit" value = "submit"/>

頁面效果如下：

點擊"瀏覽"看下效果：

神奇！

使用圖片制作按鈕：將type="image"即可，代碼如下：

<input type = "image" src = "img/示例圖片/submit.jpg"/><br>

頁面效果如下：用一個src導(dǎo)入圖片即可。

示例圖片：路徑自行設(shè)置即可！

為表單設(shè)置一個重置按鈕：如果用戶打算重置表單內(nèi)容后從新填寫，我們可以給他這樣一個按鈕：

<input type="reset" /><br>

頁面如圖所示：

大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！

舉個例子，如圖：

下面我們點擊"重置"后效果如下：

form1中的內(nèi)容沒有被清空，"重置"按鈕所在的form2內(nèi)容被清空了！

type屬性值講解我們到此結(jié)束了，hidden值這里先不給大家介紹，以后有機會再細說。

button值以后在JavaScript部分還會細說，這里也先略過。

除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學(xué)習(xí)吧！

今天的內(nèi)容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。

碎片化的知識其實對人并沒有多大作用，但是我們的時間在現(xiàn)代化的生活節(jié)奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學(xué)習(xí)完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎(chǔ)頁面制作的教程體系是我的主要目的。希望大家學(xué)有所成！

喜歡我的教程的小伙伴請關(guān)注我，點贊也會讓我充滿動力！

喜歡的小伙伴請關(guān)注和轉(zhuǎn)發(fā)，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：34道常見的HTML+CSS面試題（附答案）
下一篇：MySQL自動化生成HTML頁面(導(dǎo)出數(shù)據(jù))極限SQL編程

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

零基礎(chǔ)學(xué)習(xí)HTML背景表單單選按鈕復(fù)選框上傳文件下拉列表

單元素屬性2

HTML完整學(xué)習(xí)目錄

您的項目需求