HTML(表單元素)

表單:

? 表單是什么其馏?--表單不是表格

? ? ? 用戶可以在其中提供一些數(shù)據(jù)或信息或選項的html元素簇捍。表單通常有一個“提交”的按鈕罐寨,然后將這些數(shù)據(jù)或信息或選項提供給服務(wù)器上的程序使用--數(shù)據(jù)處理。

? ? ? 表單的核心是數(shù)據(jù)。

表單標簽的構(gòu)成和形式:

? ? ? <form? action=“將本表單中的數(shù)據(jù)提交給的對象(是一個php文件名而已)”? method="post">

? ? ? ? ? ? ? ? 第一個表單項。

? ? ? ? ? ? ? ? 第二個表單項。

? ? ? ? ? ? ? 。啃奴。。雄妥。最蕾。。老厌。

? ? ? ? </form>

有哪些表單項瘟则?

? 單行文本框:<input? type="text"? name="n1"/>

? ? ? ? ? ? ? ? ? value:設(shè)定其中的初始文字

? ? ? ? ? ? ? ? ? ? size:設(shè)置其輸入框的寬度(單位是“字符寬”)--其中能放置該數(shù)量的字符

? ? ? ? ? ? ? ? ? ? maxlength:設(shè)置該輸入框最多能輸入的字符個數(shù)

? ? ? ? ? ? ? ? ? ? readonly:這是一個“無值”屬性,表示“只讀”梅桩,則寫法是readonly=“readonly”

? ? ? ? ? ? ? ? ? ? disable:設(shè)置該輸入框“無效”

? ? 單行文本項:<input? type="text"? name="n"/>

? ? ? 密碼框:<input? type=''password''? name=''n2''/>

? ? 其他屬性:

? ? value:設(shè)定其中的初始文字

? ? size:設(shè)置其輸入框的寬度(單位是“字符寬”)——其中能放置該數(shù)量的字符

? ? maxlength:設(shè)置該輸入框最多能輸入的字符個數(shù)

? 單選項:<input type=”radio” name=”n3” value=”某個值” />

說明:單選項通常必須有value值壹粟;

其他屬性:

checked: 表示該選項默認是選中的狀態(tài)。也是一個“無值屬性”

name特別說明:一組的單選項要求name值必須相同宿百。

多選項:<input type=”checkbox” name=”n4” value=”某值” />

說明:多選項通常必須有value值;

其他屬性:

checked: 表示該選項默認是選中的狀態(tài)洪添。也是一個“無值屬性”

提交按鈕:<input type=”submit” name=”n5” value=”提交文字” />

說明:點擊提交按鈕垦页,則表單就會“被提交”,即數(shù)據(jù)會傳入到表單的action所設(shè)定的文件中去干奢。

圖片按鈕:<input type=”image” name=”n6” src=”圖片地址” />

說明:圖片按鈕的功能其實也是“提交”痊焊,但其顯示出來的效果是一張圖片——這樣有利于美化頁面。

重置按鈕:<input type=”reset” name=”n7” value=”重置文字” />

說明:會將表單的所有用戶填寫或選擇的數(shù)據(jù)恢復(fù)到初始狀態(tài)

普通按鈕:<input type=”button” name=”n8” value=”文字” />

說明:對表單沒有影響,但可以從中產(chǎn)生“動作”以實現(xiàn)其他要求(js程序)

文件域:<input type=”file” name=”n9” />

說明:可以讓用戶選擇本地的文件(并發(fā)送到服務(wù)器)——文件也是數(shù)據(jù)薄啥。

隱藏域:<input type=”hidden” name=”n10” />

說明:界面上不可見辕羽,但是作為一份“隱藏的數(shù)據(jù)”提交給服務(wù)器——編程所需。

下拉選擇:使用select和option標簽配合實現(xiàn)垄惧。但要把此當作“一個表單項”

<select name=”n11” multiple=” multiple” >

<option value=”1” >文字1</option>

<option value=”2” selected=”selected” >文字2</option>

<option value=”3” >文字3</option>

………………….

</select>

說明:

option標簽上可以使用selected屬性刁愿,表明該select元素的默認選中的項(默認是第一項被選中)。

select標簽上可以使用multiple屬性到逊,使該select元素可以“選擇多項”(即默認只能選一個)

多行選項(也叫列表選項):多行選項其實只是下拉選擇的一種“變形”——設(shè)置其size值大于等于就會成多行铣口。

<select name=”n12” size=”4”>

<option value=”1” >文字1</option>

<option value=”2” >文字2</option>

<option value=”3” >文字3</option>

………………….

</select>

多行文本框:<textarea name=”n13” rows=”行數(shù)”? cols=”列數(shù)”></textarea>

說明:

rows設(shè)定的行數(shù)是一個數(shù)字,表示該多行文本框可以顯示的文字的行數(shù)

cols設(shè)定的列數(shù)是一個數(shù)字觉壶,表示該多行文本框可以顯示的一行文字中個數(shù)

此標簽沒有value屬性脑题。但其實際的“值”是放在此標簽中間的所有內(nèi)容。

注意:表單項都必須有name屬性铜靶,以表明其“名字”——服務(wù)器取其中的數(shù)據(jù)就是憑此名字叔遂。

將文字和選項綁為一體<label>.............................</label>

表單練習:

圖片發(fā)自簡書App

圖片發(fā)自簡書App



圖片發(fā)自簡書App

圖片發(fā)自簡書App

圖片發(fā)自簡書App

圖片發(fā)自簡書App

圖片發(fā)自簡書App
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市争剿,隨后出現(xiàn)的幾起案子已艰,更是在濱河造成了極大的恐慌,老刑警劉巖秒梅,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件旗芬,死亡現(xiàn)場離奇詭異,居然都是意外死亡捆蜀,警方通過查閱死者的電腦和手機疮丛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辆它,“玉大人誊薄,你說我怎么就攤上這事∶誊裕” “怎么了呢蔫?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長飒筑。 經(jīng)常有香客問我片吊,道長,這世上最難降的妖魔是什么协屡? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任俏脊,我火速辦了婚禮,結(jié)果婚禮上肤晓,老公的妹妹穿的比我還像新娘爷贫。我一直安慰自己认然,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布漫萄。 她就那樣靜靜地躺著卷员,像睡著了一般。 火紅的嫁衣襯著肌膚如雪腾务。 梳的紋絲不亂的頭發(fā)上毕骡,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機與錄音窑睁,去河邊找鬼挺峡。 笑死,一個胖子當著我的面吹牛担钮,可吹牛的內(nèi)容都是我干的橱赠。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼箫津,長吁一口氣:“原來是場噩夢啊……” “哼狭姨!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起苏遥,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤饼拍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后田炭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體师抄,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年教硫,在試婚紗的時候發(fā)現(xiàn)自己被綠了叨吮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡瞬矩,死狀恐怖茶鉴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情景用,我是刑警寧澤涵叮,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站伞插,受9級特大地震影響割粮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜媚污,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一穆刻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧杠步,春花似錦氢伟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至甸私,卻和暖如春诚些,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背皇型。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工诬烹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人弃鸦。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓绞吁,卻偏偏與公主長得像,于是被迫代替她去往敵國和親唬格。 傳聞我的和親對象是個殘疾皇子家破,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)购岗,斷路器汰聋,智...
    卡卡羅2017閱讀 134,628評論 18 139
  • 表單元素有哪些 表示了文檔中的一個區(qū)域,這個區(qū)域中包含有交互控制元件喊积,用來像web服務(wù)器提交信息 輸入文本框烹困,根據(jù)...
    夜月行者閱讀 2,304評論 3 2
  • <form> 元素 元素定義 HTML 表單區(qū)間,而這個區(qū)間的數(shù)據(jù)將會被提交給后臺乾吻。例子: 結(jié)果是form標簽內(nèi)的...
    Aleph_Zheng閱讀 304評論 0 0
  • 表單基礎(chǔ)知識 在HTML中髓梅,表單是由 元素來表示的,而在JS中溶弟,表單對應(yīng)的則是HTMLFormElement類型女淑。...
    oWSQo閱讀 904評論 0 1
  • 很多年前,看過一遍《立春》辜御,久的我已經(jīng)忘記電影到底在講什么了鸭你。今天翻出來重看,印象突然就深刻起來擒权。 有個男生曾告訴...
    名字各種被占用閱讀 395評論 0 1