怎么在HTML5中實現輸入框下拉菜單效果

今天小編給大家分享一下怎么在HTML5中實現輸入框下拉菜單效果的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1.單選框代碼

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

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

2.復選框代碼

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

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

3.文本框代碼示例

<span>所在地區：</span>
    <input type="text">

4.文本域代碼示例

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

注意點：

rows相當于height ， cols相當于width

若想設置為禁止拖動則添加代碼

<textarea ></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這是設置下拉菜單默認提示文字

以上就是“怎么在HTML5中實現輸入框下拉菜單效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。