• <tr id="yyy80"></tr>
  • <sup id="yyy80"></sup>
  • <tfoot id="yyy80"><noscript id="yyy80"></noscript></tfoot>
  • 99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看 ?

    細(xì)說HTML5中的表單元素

    2021-05-06 11:19:42四川職業(yè)技術(shù)學(xué)院
    內(nèi)江科技 2021年4期
    關(guān)鍵詞:輸入框提示信息文本框

    ◇四川職業(yè)技術(shù)學(xué)院 朱 倩

    表單在網(wǎng)頁設(shè)計(jì)的過程中有著不可替代的作用,在HTML5新增了表單了表單方面的諸多功能,為網(wǎng)頁開發(fā)者帶來了極大的方便,本文就新增的input輸入類型和其他屬性進(jìn)行探討。

    表單在網(wǎng)頁設(shè)計(jì)中的作用非常重要,是網(wǎng)頁數(shù)據(jù)采集功能的重要實(shí)現(xiàn)。HTML5中增加了表單方面的諸多功能,包括input輸入類型、表單元素、form屬性等,使用這些新的元素,前端開發(fā)人員可以更加高效的制作Web表單。

    1 認(rèn)識HTML表單

    在HTML中,一個(gè)完整的表單通常由表單控件(也稱為表單元素)、提示信息和表單域3個(gè)部分構(gòu)成,如下圖所示,即為一個(gè)簡單的HTML表單界面及其構(gòu)成。

    圖1 HTML表單構(gòu)成圖

    對于表單構(gòu)成中的表單控件、提示信息和表單域,對它們的具體解釋如下:

    (1)表單控件:包含了具體的表單功能項(xiàng),如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。

    (2)提示信息:一個(gè)表單中通常還需要包含一些說明性的文字,提示用戶進(jìn)行填寫和操作。

    (3)表單域:它相當(dāng)于一個(gè)容器,用來容納所有的表單控件和提示信息,可以通過它定義處理表單數(shù)據(jù)所用程序的url地址,以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域,表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。

    2 input元素及其屬性

    類型元素是表單中的最常見的元素,網(wǎng)頁中常見的單行文本框、單選按鈕、復(fù)選框、普通按鈕、提交按鈕等都是通過它定義的。在HTML5中,我們不僅可以使用這些常見的類型,還新增了一些類型。下面就input元素及其屬性做介紹,其基本語法格式如下:。

    2.1 input元素type屬性新增的8種類型

    (1)email類型。email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框,用來驗(yàn)證email輸入框的內(nèi)容是否符合Email郵件地址格式;如果不符合,將提示相應(yīng)的錯誤信息。

    (2)url類型。url類型的input元素是一種用于輸入U(xiǎn)RL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本,則會提交數(shù)據(jù)到服務(wù)器;如果輸入的值不符合URL地址格式,則不允許提交,并且會有提示信息。

    (3)tel類型。tel類型用于提供輸入電話號碼的文本框,由于電話號碼的格式千差萬別,很難實(shí)現(xiàn)一個(gè)通用的格式。因此,tel類型通常會和pattern屬性配合使用。

    (4)search 類型。search 類型是一種專門用于輸入搜索關(guān)鍵詞的文本框,它能自動記錄一些字符,例如站點(diǎn)搜索或者Google搜索。在用戶輸入內(nèi)容后,其右側(cè)會附帶一個(gè)刪除圖標(biāo),單擊這個(gè)圖標(biāo)按鈕可以快速清除內(nèi)容。

    (5)color類型。color類型用于提供設(shè)置顏色的文本框,實(shí)現(xiàn)一個(gè)RGB顏色輸入。其基本形式是#RRGGBB,默認(rèn)值為#000000,通過value屬性值可以更改默認(rèn)顏色。單擊color類型文本框,可以快速打開拾色器面板,方便用戶可視化選取一種顏色。

    (6)number類型。number類型的input元素用于提供輸入數(shù)值的文本框。在提交表單時(shí),會自動檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi),則會出現(xiàn)錯誤提示。number類型的輸入框可以對輸入的數(shù)字進(jìn)行限制,規(guī)定允許的最大值和最小值、合法的數(shù)字間隔或默認(rèn)值等。

    (7)range類型。range類型的input元素用于提供一定范圍內(nèi)數(shù)值的輸入范圍,在網(wǎng)頁中顯示為滑動條。它的常用屬性與number類型一樣,通過min屬性和max屬性,可以設(shè)置最小值與最大值,通過step屬性指定每次滑動的步幅。

    (8)Date pickers類型。Date pickers類型是指時(shí)間日期類型,HTML5中提供了多個(gè)可供選取日期和時(shí)間的輸入類型,用于驗(yàn)證輸入的日期。

    案例1:靈活使用HTML5表單新增的8種類型,制作情況調(diào)查表。

    圖2 情況調(diào)查表效果圖

    2.2 input元素的其他屬性

    (1)autofocus屬性。在HTML5中,autofocus屬性用于指定頁面加載后是否自動獲取焦點(diǎn),將標(biāo)記的屬性值指定為true時(shí),表示頁面加載完畢后會自動獲取該焦點(diǎn)。注意:同一頁面中只能指定一個(gè)autofocus屬性值,請謹(jǐn)慎使用。

    例如:

    (2)form屬性。在HTML5之前,如果用戶要提交一個(gè)表單,必須把相關(guān)的控件元素都放在表單內(nèi)部,即標(biāo)簽之間。在提交表單時(shí),會將頁面中不是表單子元素的控件直接忽略掉。有時(shí)可能需要提交表單之外的某些元素,則可用到form屬性。

    例如:form屬性的應(yīng)用。

    參考代碼:

    (3)list屬性。在HTML5中新增了一個(gè)datalist元素,可以數(shù)據(jù)列表的下拉效果,用戶可以選擇也可以自己輸入,而list屬性用于指定輸入框所綁定的datalist元素,其值是某個(gè)datalist的id。

    例如:list屬性的應(yīng)用

    (4)min、max和step屬性。HTML5中的min、max和step屬性用于為包含數(shù)字或日期的input輸入類型規(guī)定限值,也就是給這些類型的輸入框加一個(gè)數(shù)值的約束,適用于date、pickers、number和range標(biāo)簽。具體屬性說明如下:

    max:規(guī)定輸入框所允許的最大輸入值。

    min:規(guī)定輸入框所允許的最小輸入值。

    Step:為輸入框規(guī)定合法的數(shù)字間隔,如果不設(shè)置,默認(rèn)值是1。

    (5)multiple屬性。multiple屬性指定輸入框可以選擇多個(gè)值,該屬性適用于email和file類型的input元素。multiple屬性用于email類型的input元素時(shí),表示可以向文本框中輸入多個(gè)Email地址,多個(gè)地址之間通過逗號隔開;multiple屬性用于file類型的input元素時(shí),表示可以選擇多個(gè)文件。

    例如:multiple屬性的應(yīng)用

    請選擇文件:

    (6)pattern屬性。pattern屬性用于驗(yàn)證input類型輸入框中,用戶輸入的內(nèi)容是否與所定義的正則表達(dá)式相匹配。pattern屬性適用于的類型是:text、search、url、tel、email和password的標(biāo)記。

    例如:郵政編碼

    (7)placeholder屬性。placeholder屬性用于為input類型的輸入框提供相關(guān)提示信息,以描述輸入框期待用戶輸入何種內(nèi)容。在輸入框?yàn)榭諘r(shí)顯式出現(xiàn),而當(dāng)輸入框獲得焦點(diǎn)時(shí)則會消失。placeholder屬性適用于type屬性值為text、search、url、tel、email以及password的標(biāo)記。

    (8)required屬性。HTML5中的輸入類型,不會自動判斷用戶是否在輸入框中輸入了內(nèi)容,如果開發(fā)者要求輸入框中的內(nèi)容是必須填寫的,那么需要為input元素指定required屬性。required屬性用于規(guī)定輸入框填寫的內(nèi)容不能為空,否則不允許用 戶提交表單。用于text、search、url、email、password、number、checkbox、radio和file。

    例如:placeholder屬性、required屬性的應(yīng)用

    請輸入郵箱:

    3 綜合案例

    使用HTML5新增range類型拖動改變顏色值。效果圖如下:

    圖4 滑動效果

    圖3 初始效果

    案例分析:

    (1)采用fieldset實(shí)現(xiàn)界面布局,采用legend實(shí)現(xiàn)分組框標(biāo)題,在分組框中設(shè)置了兩個(gè)span,一個(gè)包含三個(gè)滑塊,一個(gè)span用于顏色的顯示,還有一個(gè)

    標(biāo)記用來輸出滑塊值。

    (2)在CSS樣式表中完成界面的布局(位于頁面的中央)。

    (3)在javascript中完成拖動事件的實(shí)現(xiàn)(onChange)。

    參考代碼如下:

    通過上面的介紹,完成了對HTML5表單中input元素的各種新增類型以及常見屬性的學(xué)習(xí),對初學(xué)者有一定的參考借鑒作用。HTML5表單還有很多其他的元素以及屬性,在我們進(jìn)行表單應(yīng)用的過程中都有著不可缺少的作用,有待進(jìn)一步學(xué)習(xí)。

    猜你喜歡
    輸入框提示信息文本框
    基于GGB的拖動交互式練習(xí)題
    巧用文本框?qū)崿F(xiàn)PPT多圖片排版
    拍一拍,圖片識文字
    元征X-431 PRO 3S+實(shí)測:2018年吉普自由光保養(yǎng)歸零
    PPT文本框的另類應(yīng)用
    輸入框設(shè)計(jì)中需注意的9個(gè)細(xì)節(jié)
    元征X-431實(shí)測篇2015款路虎攬勝剎車片更換過程
    自編翻譯程序
    CHIP新電腦(2015年10期)2015-10-15 12:48:23
    文本框酷變3D效果
    號碼提示信息的呈現(xiàn)方法對手機(jī)操作的影響
    和平县| 永胜县| 张家港市| 上饶市| 三门县| 广昌县| 高邮市| 邯郸县| 东阳市| 灵璧县| SHOW| 栾川县| 榆社县| 贵定县| 泸西县| 云梦县| 平泉县| 吉水县| 安仁县| 太康县| 来凤县| 盘锦市| 武城县| 文化| 简阳市| 白沙| 建昌县| 南阳市| 敖汉旗| 赞皇县| 岚皋县| 道孚县| 南昌县| 苗栗县| 邻水| 龙海市| 天祝| 湘乡市| 喜德县| 建昌县| 图们市|