什么是表單凸椿？
表單用來收集用戶信息
什么是表單元素瓣距？
在html中党晋，標(biāo)簽/標(biāo)記/元素都是指html中的標(biāo)簽
表單元素還是html中的標(biāo)簽：只不過這些標(biāo)簽比較特殊百匆，在瀏覽器中所有的表單的標(biāo)簽都是有特殊的外觀和默認(rèn)的功能
表單的格式：
<form>
<表單元素>
</form>
input標(biāo)簽:
input標(biāo)簽的type屬性姊氓，這個屬性可以有很多類型的取值械馆，取值不同就決定了input標(biāo)簽的功能和外觀
<!--單選框
1. 默認(rèn)情況下不具備互斥功能,要想單選框互斥那么必須給每一個單選框
都設(shè)置一個name屬性,然后name屬性必須設(shè)置相同的值
2. 要想讓單選框默認(rèn)選中某一個框,那么可以給input標(biāo)簽添加一個
checked屬性硅卢，如果單選框有多個都設(shè)置checked的話低飒，只按照最后一個為準(zhǔn)
-->
<!--多選框
1.多選框可以選擇多個
-->
<form action="http:www.520it.com">
賬號:<input type="text" name="zhangsna"><br>
密碼:<input type="password" name="123456"><br>
賬號:<input type="text" value="lnj"><br>
密碼:<input type="password" value="123"><br>
<!--單選框
1. 默認(rèn)情況下不具備互斥功能,要想單選框互斥那么必須給每一個單選框
都設(shè)置一個name屬性,然后name屬性必須設(shè)置相同的值
2. 要想讓單選框默認(rèn)選中某一個框,那么可以給input標(biāo)簽添加一個
checked屬性
-->
性別:
男<input type="radio" name="gender">
女<input type="radio" name="gender" checked>
保密<input type="radio" name="gender"><br>
<!--多選框
1.多選框可以選擇多個
-->
<!--定義普通的按鈕,通過values屬性可以給按鈕設(shè)置標(biāo)題,配合js完成一些操作
圖片按鈕和普通按鈕的作用是一樣的
重置按鈕:
用于清空,表單中已經(jīng)填寫好的數(shù)據(jù)
如果想修改重置按鈕的按鈕標(biāo)題,可以重寫values值就可以
提交按鈕:
將表單中已經(jīng)填寫好的數(shù)據(jù)提價到遠(yuǎn)程服務(wù)器
注意點:
要想把表單中填寫好的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器,必須具備兩個
條件
1.需要給form表單添加一個action屬性,通過這個action屬性
指定需要提交到服務(wù)器的質(zhì)地
2.需要給需要提交到服務(wù)器的表單元素添加一個name屬性
隱藏域:
將一些數(shù)據(jù)悄悄提交到服務(wù)器
-->
<input type="button" value="我是按鈕" ><br>
<input type="image" src="girl.jpg"><br>
<input type="reset" value="清空"><br>
<input type="submit" value="提交"><br>
<input type="hidden"><br>
</form>
input標(biāo)簽的使用和理解：
<form>
<!--可以自動校驗輸入的郵箱的格式是否正確-->
郵箱:<input type="email">
<!--可以自動校驗輸入的內(nèi)容是否是URL地址-->
域名:<input type="url">
<!--可以自動校驗輸入的是是否是數(shù)字,只能輸入數(shù)字-->
電話號碼:<input type="number">
<!--通過日歷來選擇時間-->
時間:<input type="date">
顏色:<input type="color">
搜索:<input type="search">
<input type="submit">
</form>
<body>
<!--
1.datalist標(biāo)簽
作用:給輸入框綁定帶選項
如何綁定帶選型呢:
1.搞一個輸入框
2.搞一個datalist列表
3.給datalist列表標(biāo)簽添加一個id
4,給輸入框添加一個list屬性,將datalist的
id對應(yīng)的值賦給list屬性即可。
-->
請輸入你的車型:<input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
</datalist>
</body>
//注意點:select 下拉列表,不是用來綁定給誰的,自己就是一個列表
// 1. 下拉列表不能輸入內(nèi)容,但是可以直接在列表中選擇內(nèi)容
// 2. 可以通過給option 標(biāo)簽添加一個selected屬性來指定列表默認(rèn)的值
// 3. 可以通過給option標(biāo)簽包裹一層optgroup標(biāo)簽來給下拉列表中的數(shù)據(jù)分類
<select>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>西安</option>
<option selected="selected">南陽</option>
</select>
<select>
<optgroup label="北京">
<option>朝陽區(qū)</option>
<option>昌平區(qū)</option>
<option>通州區(qū)</option>
</optgroup>
<optgroup label="南京">
<option>雨花區(qū)</option>
<option>玄武區(qū)</option>
<option>江寧區(qū)</option>
<!--<option selected="selected">南陽</option>-->
</optgroup>
</select>
/// textarea:標(biāo)簽
//作用:定義一個多行的輸入框
//格式:<textarea></textarea>
//默認(rèn)情況下輸入框可以無限換行
//默認(rèn)情況下輸入框有自己的寬度和高度
//可以通過cols和rows來指定輸入框的寬度和高度
//但是雖然指定了列數(shù)和行數(shù),但是還是可以無限往下輸入
//默認(rèn)情況下輸入框可以手動拉伸的
<textarea cols="3" rows="5">
</textarea>
表單練習(xí)：
<form action="https:www.baidu.com">
<!--filedset標(biāo)簽可以給表單添加一個邊框
legend表單可以給邊框指定一個標(biāo)題-->
<fieldset>
<legend>注冊界面</legend>
<p>
賬號:<input type="text" name="account">
</p>
<p>
密碼:<input type="password" name="pwd">
</p>
<p>
<!--注意點:
單選框和多選框的name都需要指定相同的name值
-->
性別:
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="radio" name="gender" value="security" checked="checked"> 保密
</p>
<p>
愛好:
<input type="checkbox" name="sports" value="basketball"> 籃球
<input type="checkbox" name="sports" value="football"> 足球
<input type="checkbox" name="sports" checked="checked" value="zuyu"> 足浴
</p>
<p>
簡介:
<textarea name="des" id="" cols="30" rows="10"></textarea>
</p>
<p>
生日:
<input type="date" name="birthday">
</p>
<p>
郵箱:
<input type="email" name="email">
</p>
<p>
電話:
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="注冊">
<input type="reset" value="清空">
</p>
</fieldset>
<!--https://www.baidu.com/?gender=on&sports=on&sports=on
https://www.baidu.com/?gender=male&sports=on&sports=on 沒有value值為on
https://www.baidu.com/?gender=male&sports=basketball&sports=zuyu
添加name屬性就可以提交值桑驱，除了按鈕類型的input標(biāo)簽外竭恬，其他類型的都可以指定value屬性
將來提交到服務(wù)器的值
https://www.baidu.com/?
account=2324
&pwd=324
&gender=male
&sports=basketball
&sports=zuyu
&des=eqwrwe
&birthday=2017-06-07
&email=1232%40qq.com
&phone=1324234234
-->
</form>
<body>
<!--
什么是video標(biāo)簽
作用:用于播放視頻
格式:<video src= ""> </video>
src:用于高速video標(biāo)簽需要播放的視頻地址
autoplay:用于高速video標(biāo)簽是否自動播放視頻
controls:是否顯示控制條
poster:用于告訴video標(biāo)簽視頻沒有播放之前顯示占位圖片
loop:用于高速video標(biāo)簽,視頻播放完畢之后是否需要循環(huán)
perload:預(yù)加載視頻,和autoplay相沖
但需要注意:如果設(shè)置了autoplay屬性,那么preload屬性就會失效
muted:靜音
width,height:寬高設(shè)置,設(shè)置其中的一個,保持等比例防止變形
-->
<video src="1.mp4" autoplay="autoplay" controls="controls"
poster="girl.jpg" loop="loop"
></video>
<!--video標(biāo)簽的第二種格式:
<video>
<source sr = "" type = "" > </source>
</video>
由于視頻數(shù)據(jù)非常重要,所以五大瀏覽器都不愿意比熱支持視頻格式,所以導(dǎo)致
了沒有一種視頻格式是所有瀏覽器都支持的,這個時候w3c為了解決這個問題,
所以推出了第二個video標(biāo)簽的格式
video標(biāo)簽的第二種格式存在的意義,就是為了解決瀏覽器適配的問題
video元素支持三種視頻格式,我們可以把三種格式都通過
source標(biāo)簽指定給video標(biāo)簽,那么以后當(dāng)瀏覽器播放視頻時它就會從這
三種選擇一種自己支持的格式來播放
-->
<video>
<source src="sb1.webm" type="video/webm">
<source src="sb1.mp4" type="video/mp4">
<source src="sb1.ogg" type="video/ogg">
</video>
</body>
<!--
注意點:
當(dāng)前通過video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持
的視頻格式,但是顯然所有瀏覽器都通過video標(biāo)簽播放還有一個前提條件
就是瀏覽器必須支持html5標(biāo)簽,否則同樣無法播放在過去的一些瀏覽器是不支 持
html5標(biāo)簽的,所以為了讓過去的一些瀏覽器也能夠通過video標(biāo)簽來播放視頻
那么我們以后可以通過一個js框架叫做html5media來實現(xiàn)
1.什么是audio標(biāo)簽
作用:播放音頻
格式:
<audio src= "">
</audio>
<audio>
<source src= "" type= "">
<audio>
注意點:audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣,video能夠使用的
屬性在audio標(biāo)簽中大部分都能夠使用,并且功能一樣,只不過三個屬性不能用
height、width熬的、poster
-->
<audio>
<source src="girl.mp3" type="audio/mp3" autoplay="autoplay" controls="controls">
</audio>html-表單的理解與使用
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門预烙，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人道媚，你說我怎么就攤上這事扁掸。” “怎么了最域？”我有些...
- 文/不壞的土叔 我叫張陵谴分，是天一觀的道長。 經(jīng)常有香客問我镀脂，道長牺蹄，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任薄翅，我火速辦了婚禮沙兰，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘翘魄。我一直安慰自己鼎天，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布暑竟。 她就那樣靜靜地躺著斋射，像睡著了一般。 火紅的嫁衣襯著肌膚如雪但荤。 梳的紋絲不亂的頭發(fā)上罗岖，一...
- 文/蒼蘭香墨 我猛地睜開眼铐炫，長吁一口氣：“原來是場噩夢啊……” “哼垒手！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起倒信，我...
- 正文 年R本政府宣布雾鬼，位于F島的核電站，受9級特大地震影響宴树，放射性物質(zhì)發(fā)生泄漏策菜。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一酒贬、第九天 我趴在偏房一處隱蔽的房頂上張望又憨。 院中可真熱鬧，春花似錦同衣、人聲如沸竟块。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽浪秘。三九已至，卻和暖如春埠况，著一層夾襖步出監(jiān)牢的瞬間耸携，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 作者：傅姝麗（滬江前端開發(fā)工程師）本文原創(chuàng)翻譯矛紫，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處牌里。 如果你在過去幾個月一直關(guān)注...
