當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

HTML5輸入框下拉菜單功能的示例代碼

 2020-10-16 16:57  來源: 腳本之家   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

這篇文章主要介紹了HTML5輸入框下拉菜單功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1.單選框代碼

<span>性別:</span>
            <input name="sex" value="" type="radio">男
            <input name="sex" value="" type="radio">女

需要注意的是單選框name值需保持一致

樣式:

復(fù)選框

2.復(fù)選框代碼

 <span>喜歡的類型:</span>
    <input type="checkbox">嫵媚的
    <input type="checkbox">可愛的
    <input type="checkbox">小鮮肉
    <input type="checkbox">老臘肉
    <input type="checkbox">都喜歡

如需要進(jìn)行form表單提交 則需要name的屬性一樣

樣式

文本框

3.文本框代碼示例

<span>所在地區(qū):</span>
    <input type="text">

代碼運(yùn)行界面樣式:

文本域

4.文本域代碼示例

<span class="te2">自我介紹:</span>
    <textarea rows="2" cols="21"></textarea>

注意點(diǎn):

rows相當(dāng)于height , cols相當(dāng)于width

若想設(shè)置為禁止拖動(dòng)則添加代碼

<textarea style="resize:none;"></textarea>

代碼運(yùn)行示例:

下拉菜單

5.下拉菜單代碼示例:

<select name="" id="">
        <option value="" disabled selected hidden>--請(qǐng)選擇月--</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
        <option value="">6</option>
        <option value="">7</option>
        <option value="">8</option>
        <option value="">9</option>
        <option value="">10</option>
        <option value="">11</option>
        <option value="">12</option>
    </select>

注意點(diǎn):disabled selected hidden這是設(shè)置下拉菜單默認(rèn)提示文字

代碼運(yùn)行演示:

到此這篇關(guān)于HTML5輸入框下拉菜單功能的示例代碼的文章就介紹到這了,更多相關(guān)HTML5輸入框下拉菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

來源:腳本之家

鏈接:https://www.jb51.net/html5/744182.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
html5教程
下拉菜單

相關(guān)文章

  • 怎么刷百度下拉框 刷百度下拉框代碼

    百度此次的下拉框新模式目前還處于小流量測(cè)試階段,到底會(huì)變成什么樣,我們不得而知。象百度這樣的互聯(lián)網(wǎng)巨無(wú)霸,靠在自己的肩膀上生存的公司,個(gè)人不計(jì)其數(shù),一旦這個(gè)巨人換了一個(gè)方向,就會(huì)讓很多人搖搖欲墜,迷失在互聯(lián)網(wǎng)里。

    標(biāo)簽:
    刷百度下拉框
    下拉菜單
  • 刷百度下拉框原理和辦法

    對(duì)一般刷詞者來說,不要頻繁修改,假如頻繁修改,肯定會(huì)影響下拉出單詞的時(shí)刻和作用。至于現(xiàn)在已經(jīng)刷出下拉效果的單詞,我們可以把點(diǎn)卡量減一半以維持下拉效果,用余額的另一半月卡來刷其他單詞。這可以節(jié)省開支,做更多的事情,然后降低市場(chǎng)推廣的本錢。

    標(biāo)簽:
    刷百度下拉框
    下拉菜單
  • 百度下拉框營(yíng)銷推廣怎么做?有工具可以刷?

    現(xiàn)在很多網(wǎng)民在使用百度搜索相關(guān)內(nèi)容的過程中,會(huì)發(fā)現(xiàn)只要我們?cè)谒阉骺蛑休斎腙P(guān)鍵詞,那么百度的下拉框就會(huì)出現(xiàn)一些相關(guān)關(guān)鍵詞,這就是百度下拉框。

  • 做好這5點(diǎn)基本要求 才能算一個(gè)合格的HTML5動(dòng)畫

    隨著CSS3和HTML5建站技術(shù)的發(fā)展,動(dòng)效在網(wǎng)頁(yè)設(shè)計(jì)中的作用越來越顯著。與靜態(tài)界面相比,動(dòng)態(tài)的轉(zhuǎn)變更符合人們的認(rèn)知體系,可以有效降低用戶認(rèn)知負(fù)載。這是因?yàn)椋诰W(wǎng)站界面使用動(dòng)畫效果能讓元素的變化、界面的轉(zhuǎn)變、層次結(jié)構(gòu)之間的關(guān)系更加清晰自然。從某種程度上來說,動(dòng)效還是用戶交互的基礎(chǔ)。那么,什么樣的動(dòng)效

  • HTML5/CSS3系列教程:HTML5 區(qū)域(Sectioning)的重要性

    不管你以前在web頁(yè)面布局中如何稱呼它們-“區(qū)域”還是“塊”,我們一直都在布局中將頁(yè)面分成可視的不同區(qū)域。但真正的問題在于我們并沒有使用任何正確的工具來實(shí)現(xiàn)。一般情況下我們使用典型的網(wǎng)格來劃分頁(yè)頭,頁(yè)面主題,頁(yè)尾等等區(qū)域來實(shí)現(xiàn)所謂的頁(yè)面布局。在過去的很多年以來,我們都使用DIV來幫助我們劃分頁(yè)面區(qū)域

熱門排行

信息推薦