HTML的基礎控制項有哪些

這次帶給大家HTML的基礎控制有哪些，使用HTML的控制項注意事項有哪些，以下就是實戰案例，一起來看一下。

d5fd7aea971a85678ba271703566ebfd標籤

d5fd7aea971a85678ba271703566ebfd 標籤用於蒐集使用者資訊。

type屬性

根據不同的 type 屬性值，輸入欄位擁有很多種形式。可以是文字欄位、複選框、遮罩後的文字控制項、單選按鈕、按鈕等等。

text：文字區域

readonly屬性：是否唯讀。

password：密碼區域，輸入的文字以'*'展示

checkbox：複選框

checked屬性：是否選取；

##radio：單選框；

name屬性：指定多個單選框的在一個區域裡進行單選操作

reset：重置目前ff9c23ada1bcecdd1a0fb5d5a0f18437表單裡所有標籤到初始化狀態(如清除文字區域內容)

submit：提交目前ff9c23ada1bcecdd1a0fb5d5a0f18437表單資訊到指定頁面

button：普通按鈕

　　　　value屬性：button按鈕顯示的文字

file：檔案選擇標籤

hide：隱藏區域，可以把一些不展示給用戶，而自己使用的資訊存放於此

image：圖片區域

　　　　src屬性：指定圖片存放的路徑；

　　　　title屬性：滑鼠移到圖上顯示的文字;
　　　　alt：圖片載入失敗或關閉時，顯示的文字；
　　　　alt：圖片載入失敗或
#；

範例

221f08282418e2996498697df914ce4e標籤

可建立單選或多選選單，類似winform的combox或listbox。

屬性

1) size {int}：設定

下拉清單尺寸。預設的為combox樣式；大於1時，就是listbox樣式。

2) multiple {boolean}：是否

多重選擇。若為多選，按住Ctrl+左鍵可進行多選操作。

3) item子項：

① 5b7a15bed8615d1b843806256bebea72標籤：定義選擇項目的類別，不能被選取。

　　label {string} 屬性：類別顯示的名稱

　　title {string} 屬性：滑鼠移到選擇項目上去，要顯示的資訊

② 5a07473c87748fb1bf73f23d45547ab8標籤：定義可選的項目

　　vlaue {string} 屬性：選擇項目特定的名稱

　　title {string} 屬性：滑鼠移到選擇項目上去，要展示的資訊 

<h3>select标签</h3>
<select id="province" multiple=multiple size="6" >
    <optgroup label="直辖市"  ></optgroup>
    <option value="bj" title="北京市" >北京</option>
    <option value="sh">上海</option>
    <optgroup label="省市" ></optgroup>
    <option value="zj">浙江</option>
    <option value="fj">福建</option>
</select>

680204f04b0c98aa3c923e36bb5ad6ed標籤

多行文字區域，可以透過cols 和rows 屬性來設定textarea 的尺寸。

屬性

rows {int}：表示顯示的行數。

cols {int}：表示顯示的列數。
readonly {boolean}：是否唯讀。

範例 

2e1cf0710519d5598b1f0f14c36ba674標籤

相當於一個展示文字方塊。

屬性

for {elementID}：關聯對應的控制項id；點選此label標籤時，綁定id的控制項會取得焦點；

<table>
    <tr>
        <td><label for=&#39;username&#39;>姓名：</label></td>
        <td><input type="text" id=&#39;username&#39;/></td>
    </tr>
    <tr>
        <td><label for=&#39;userpwd&#39;>密码：</label></td>
        <td><input type="password" id=&#39;userpwd&#39; /></td>
    </tr>
</table>

範例

<fieldset>标签
类似于winform中的groupBox控件。
item子项
<legend></legend>：表示抬头的名称。
<h3>fieldset标签</h3>
<fieldset style=&#39;width:130px&#39; >
    <legend>性别</legend>
    <input type="radio" name=&#39;sex&#39; value=&#39;boy&#39; />男
    <input type="radio" name=&#39;sex&#39; value=&#39;girl&#39; />女
</fieldset>

範例

ul、ol、li 清單標籤

ul ：unordered list （無序列表）

ol ：ordered list  （有序清單））

li ：list item （清單項目），基於上面2個清單子項目。

程式碼範例：

<ul type=circle>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>
<ol type=1>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>

屬性

type  {string}：定義了25edfb22a4f469ecb59f1190150159c6 標籤前面的符號樣式。

ul：type 有：circle 空心圓，disc 實心圓，square 實心正方形， none ：前面無符號;

ol：type 有：1 ：表示有序的1,2, 3； a ：表示有序的a，b，c；i ：羅馬數字i,ii,iii；雖然還可以定義為：circle、disc、square、none但現實都為1,2,3等序列；

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼在HTML網頁中插入影片

#如何使用HTML+CSS做出滑鼠劃過就可以顯示二級選單列

怎麼讓前端介面自動清理js、css檔案的快取

以上是HTML的基礎控制項有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！