整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 背景
設(shè)置背景顏色<body bgcolor="#000000">
設(shè)置背景圖片<body background="bg.jpg">
設(shè)置頁(yè)面文字顏色<body text="#cccccc">
顏色屬性值有三種值的格式
1，英文單詞，比如 red , yellow ,green …
<body bgcolor="yellow">
2, 十六進(jìn)制表示方式，#開頭，6個(gè)十六進(jìn)制的字符或數(shù)字 組合
比如：#FFFFFF，#000000，#CCCAAA，#22BCAD
十六進(jìn)制： 0-9 和 a-f
3, RGB模式，紅 0-255，綠 0-255，藍(lán) 0-255
比如： RGB(120,33,234)
HTML 表單
表單是一個(gè)包含表單元素的區(qū)域。
表單能夠包含 input 元素，textarea、select、fieldset、legend 和 label 元素。
表單使用標(biāo)簽（<form>）定義。
表單用于向服務(wù)器傳輸數(shù)據(jù)。
表單的結(jié)構(gòu)
<form name="form1" action="URL" method="get">
用戶名：<input type="text" name="uname" />
密 碼：<input type="password" name="passwd" />
</form>
屬性說明
name表單的名稱
action表單提交地址
method表單數(shù)據(jù)提交的方式 （get ,post）
enctypeMIME類型
target打開方式
input標(biāo)簽
屬性說明
typeinput元素類型
nameinput 元素的名稱
valueinput 元素的值
sizeinput 元素的寬度
readonly是否只讀
maxlength輸入字符的最大長(zhǎng)度
disabled是否禁用
1.文本框
<input type="text" name="username" value="" />
2.密碼框
<input type="password" name="passwd"/>
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.按鈕
<input type="button" name="btn" value="確定"/>
<input type="submit" name="comit" value="提交"/>
<input type="reset" name="reset" value="重寫"/>
<input type="image" name="img_btn" src="btn.gif"/>
6. 隱藏域
隱藏域用于在程序發(fā)送沒有必要讓用戶看到特定值的時(shí)候使用。
<input type="hidden" name="uid" value="10"/>
7. 上傳文件
<input type="file" name="photo"/>
注：利用這項(xiàng)功能時(shí)，在 form 標(biāo)簽中要指定method屬性。要把method 指定為post, enctype屬性指定為 multipart/form-data。
<textarea> 多行文本框
<textarea name="content" rows="5" cols="50"> </textarea>
屬性說明
name元素的名稱
rows指定文本框的高度
cols指定文本框的寬度
select下拉列表框
<select name="city">
<option value="0">請(qǐng)選擇</option
<option value="bj">北京</option>
<option value="gz">廣州</option>
</select>
屬性說明
name下拉列表框的名稱
size下拉列表框的顯示行數(shù)
multiple是否多選
disabled是否禁用
selected設(shè)置默認(rèn)選中的選項(xiàng)
value選項(xiàng)的值
optgroup標(biāo)簽
optgroup 元素用于組合選項(xiàng) 。
屬性說明
label指定組合選項(xiàng)名稱
fieldset標(biāo)簽
fieldset 標(biāo)簽作用是把表單中元素組合起來
<fieldset>
<legend></legend> length為字符長(zhǎng)度
<form></form>
</fieldset>
label標(biāo)簽
lable 標(biāo)簽的作用是將輸入項(xiàng)或選項(xiàng)及其標(biāo)簽文字關(guān)聯(lián)起來。
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
拉菜單的屬性
length 表示選項(xiàng)<option>的個(gè)數(shù)
selected 布爾值,表示選項(xiàng)<option>是否被選中
SelectedIndex 被選中的選項(xiàng)序號(hào),如果沒有被選中則為-1,對(duì)于多選下拉菜單而言,返回被選中的第一個(gè)選項(xiàng)序號(hào)。從0開始計(jì)數(shù)
text 選項(xiàng)的文本(它是option專有的屬性)
value 選項(xiàng)的value值
type 下拉菜單的類型。單選返回select-one,多選返回select-multiple
options 獲取選項(xiàng)的數(shù)組，列如oSelectBox.options[2]表示下拉菜單oSelectBox中的第3項(xiàng)
訪問選中項(xiàng)
下拉菜單(單選):
<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; //獲取選中項(xiàng)
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="查看選項(xiàng)" />
</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();
//遍歷整個(gè)下拉菜單
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="查看選項(xiàng)" />
</form>
</body>
</html>通用的訪問下拉菜單選中項(xiàng)的方法:
<script language="javascript">
function getSelectValue(Box){ //Box參數(shù)select標(biāo)簽的ID值
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.elements[Box]; //根據(jù)參數(shù)相應(yīng)的選擇下拉菜單
if(oSelectBox.type == "select-one"){ //判斷是單選還是多選
var iChoice = oSelectBox.selectedIndex; //獲取選中項(xiàng)
alert("單選，您選中了" + oSelectBox.options[iChoice].text);
}else{
var aChoices = new Array();
//遍歷整個(gè)下拉菜單
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="查看選項(xiàng)" />添加、替換、刪除選項(xiàng)
通過構(gòu)造函數(shù)Option()直接添加value、text等信息，相當(dāng)方便
var oOption = new Option(text,value,defaultSelected,selected)
defaultSelected為布爾型值:1(true)設(shè)置下拉式表單默認(rèn)值,
selected為布爾值:1(true)表示被選中
最后兩項(xiàng)默認(rèn)值為0,如果不希望添加的選項(xiàng)被默認(rèn)選中則可以忽略,添加選項(xiàng)時(shí)通常將<select>列表的第length項(xiàng)直接設(shè)置為新的選項(xiàng),即在末尾增加。
添加選項(xiàng)：
<html>
<head>
<title>添加選項(xiàng)</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){ //添加選項(xiàng)，參數(shù)為<select>標(biāo)簽的ID值
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[oBox.options.length] = oOption; //在菜單末尾添加選項(xiàng)
}
</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>替換選項(xiàng)
如果下拉菜單中的序號(hào)為已經(jīng)存在了的選項(xiàng),添加時(shí)則會(huì)自動(dòng)替換原有的選項(xiàng)
oBox.options[iNum]=oOption;//替換iNum個(gè)選項(xiàng)
<html>
<head>
<title>替換選項(xiàng)</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){ //替換選項(xiàng),參數(shù)Box為<select>的ID值,iNum為替換的選項(xiàng)序號(hào);
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[iNum] = oOption; //替換第iNum個(gè)選項(xiàng)
}
</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>添加選項(xiàng)到具體位置
<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中雖然在正確的位置插入了選項(xiàng),但內(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，先添加選項(xiàng)到最后，再移動(dòng)
oBox.options[oBox.options.length] = oOption;
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>注意：IE9已經(jīng)解決了bug問題
刪除下拉菜單的選項(xiàng):
刪除下拉菜單中的某個(gè)選項(xiàng)時(shí)相對(duì)最簡(jiǎn)單的,只需要將這個(gè)選項(xiàng)設(shè)置為null即可
bBox.options[iNum]=null;
為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學(xué)有所成！吸引人的東西未必珍貴。
昨天我們學(xué)習(xí)了《HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》（目錄在結(jié)尾），大家通過學(xué)習(xí)對(duì)HTML頁(yè)面中的表單元素的基本寫法已經(jīng)非常熟悉了。同時(shí)也學(xué)會(huì)了通過變換<input/>標(biāo)簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對(duì)name與value這兩個(gè)屬性的作用與特點(diǎn)進(jìn)行了闡釋。今天我們繼續(xù)學(xué)習(xí)新的表單內(nèi)容。
建立單選表單：單選表單把<input/>標(biāo)簽的type屬性修改為"radio"（收音機(jī)），為什么單選表單使用"收音機(jī)"這個(gè)詞呢？其實(shí)道理很簡(jiǎn)單，收音機(jī)調(diào)頻旋鈕是對(duì)應(yīng)角度對(duì)應(yīng)相應(yīng)調(diào)頻，不可能一個(gè)角度對(duì)應(yīng)兩個(gè)調(diào)頻，所以選這個(gè)就不能選其他的表單中的type屬性使用"radio"這個(gè)詞表示，是不是很形象。
示例代碼如下：
<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>因?yàn)槊鑼懙氖亲罡邔W(xué)歷，一般人最高學(xué)歷只有一個(gè)，不可能又是學(xué)士又是博士，因此使用單選表單。
向服務(wù)器提交時(shí)，name叫做"education"（教育），value對(duì)應(yīng)不同層次。
頁(yè)面效果如下：
大家可以點(diǎn)點(diǎn)試試，每次只能有一個(gè)被選中。如圖：
綜合練習(xí)：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
<form>
會(huì)員名稱：
<input type = "text" placeholder = "請(qǐng)輸入英文或漢語拼音" name="memberName"/><br>
會(huì)員密碼：
<input type = "text" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br>
確認(rèn)密碼：
<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>頁(yè)面效果如下：
密碼輸入：我們?cè)谑褂蒙鲜霰韱屋斎朊艽a時(shí)發(fā)現(xiàn)，密碼時(shí)實(shí)時(shí)顯示在輸入框中，這一點(diǎn)是不安全的，如圖：
如何讓密碼隱藏呢？其實(shí)看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：
會(huì)員密碼：
<input type = "password" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br>
確認(rèn)密碼：
<input type = "password" name="confirmPassWord"/><br>頁(yè)面效果如下：
上傳文件：使用type="file"可以上傳文件！
示例代碼如下：寫在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>頁(yè)面效果如下：
點(diǎn)擊"瀏覽"看下效果：
神奇！
使用圖片制作按鈕：將type="image"即可，代碼如下：
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>頁(yè)面效果如下：用一個(gè)src導(dǎo)入圖片即可。
示例圖片：路徑自行設(shè)置即可！
為表單設(shè)置一個(gè)重置按鈕：如果用戶打算重置表單內(nèi)容后從新填寫，我們可以給他這樣一個(gè)按鈕：
<input type="reset" /><br>頁(yè)面如圖所示：
大家要注意的是這個(gè)"重置"按鈕的作用范圍僅僅是它所在的<form></form>標(biāo)簽之間！
舉個(gè)例子，如圖：
下面我們點(diǎn)擊"重置"后效果如下：
form1中的內(nèi)容沒有被清空，"重置"按鈕所在的form2內(nèi)容被清空了！
type屬性值講解我們到此結(jié)束了，hidden值這里先不給大家介紹，以后有機(jī)會(huì)再細(xì)說。
button值以后在JavaScript部分還會(huì)細(xì)說，這里也先略過。
除了<input/>外，還有其他一些標(biāo)簽，例如<select>或<textarea>等有趣且實(shí)用的標(biāo)簽，我們明天再學(xué)習(xí)吧！
今天的內(nèi)容先到這里。希望大家看完之后可以寫寫代碼進(jìn)行實(shí)操。代碼這種東西即使再簡(jiǎn)單，寫過和沒寫過的體會(huì)也是不一樣的。這個(gè)部分的代碼使用"文本編輯器"就可以實(shí)踐。具體操作請(qǐng)?jiān)斠姟丁贰?/p>
碎片化的知識(shí)其實(shí)對(duì)人并沒有多大作用，但是我們的時(shí)間在現(xiàn)代化的生活節(jié)奏中被撕地越來越碎，因此我希望大家可以利用碎片時(shí)間來學(xué)習(xí)完整的知識(shí)，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎(chǔ)頁(yè)面制作的教程體系是我的主要目的。希望大家學(xué)有所成！
喜歡我的教程的小伙伴請(qǐng)關(guān)注我，點(diǎn)贊也會(huì)讓我充滿動(dòng)力！
喜歡的小伙伴請(qǐng)關(guān)注和轉(zhuǎn)發(fā)，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
