App下載

如何在HTML5中實現(xiàn)輸入框下拉菜單效果？案例詳解!

猿友 2021-07-30 14:38:12 瀏覽數(shù) (5018)
反饋

相信大家在使用各種登錄或者選擇框的時候都會遇到各種各樣的格式，那么今天小編就和大家來分享有關(guān)于：“如何在HTML5中實現(xiàn)輸入框下拉菜單效果？”這方面的相關(guān)內(nèi)容！

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">都喜歡

如需要進行form表單提交 則需要name的屬性一樣

樣式：

復(fù)選框樣式圖

文本框

3.文本框代碼示例

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

代碼運行界面樣式：

文本框樣式

文本域

4.文本域代碼示例

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

注意點：

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

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

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

代碼運行示例：

自我介紹運行案例

下拉菜單

5.下拉菜單代碼示例：

<select name="" id="">
        <option value="" disabled selected hidden>--請選擇月--</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>

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

代碼運行演示：

代碼運行結(jié)果

以上就是有關(guān)于：“如何在HTML5中實現(xiàn)輸入框下拉菜單效果？”這方面的有關(guān)內(nèi)容分享，相信大家在閱讀完這篇文章之后就有了不少的了解對于我們的問題，有喜歡html5的小伙伴們也可以在W3Cschool中進行學(xué)習(xí)和了解！ 


HTML5

0 人點贊