HTML的基礎控制項有哪些

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

標籤

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

type屬性

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

text：文字區域

readonly屬性：是否唯讀。

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

checkbox：複選框

checked屬性：是否選取；

##radio：單選框；

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

reset：重置目前

表單裡所有標籤到初始化狀態(如清除文字區域內容)

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

button：普通按鈕

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

file：檔案選擇標籤

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

image：圖片區域

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

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

範例

標籤

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

屬性

1) size {int}：設定

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

2) multiple {boolean}：是否

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

3) item子項：

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

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

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

② 標籤：定義可選的項目

　　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>

< textarea>標籤

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

屬性

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

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

範例 

標籤

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

屬性

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}：定義了

標籤前面的符號樣式。

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中文網其他相關文章！

相關標籤：

html 哪些 基礎

來源：php.cn

上一篇：HTML5的WEB介面中meta實列詳解 下一篇：HTML裡的name與id和class到底有什麼不同

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

• 最新php程式設計師工具箱 v1.0版本介紹
  2018-06-11 11:57:34
• vue.js路由失效如何處理
  2018-06-15 15:55:18
• 怎樣使用js解析資料庫（附程式碼）
  2018-06-15 15:49:00
• 如何在專案中使用js綁定DOM事件
  2018-06-15 15:46:15
• 怎樣操作JS字串與特殊字符
  2018-06-15 15:42:38
• 如何在專案中使用jQuery內each方法
  2018-06-15 15:40:34
• 如何利用jquery做出文件上傳加載
  2018-06-15 15:39:32
• 怎樣對JS原型與原型鏈進行使用
  2018-06-15 15:37:14
• Angular CLI+Angular 5實戰專案演示
  2018-06-15 15:34:21
• 使用jQuery替換節點元素（附程式碼）
  2018-06-15 15:22:51

最新問題

PX自動轉換為REM錯誤 <style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...

來自於 2024-04-16 09:34:16

0

0

4687

頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...

來自於 2024-04-06 21:58:04

0

1

800

解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...

來自於 2024-04-06 20:22:15

0

1

454

如何在 livewire 惰性佔位符中使用 laravel 元件 我想在livewire3佔位符內添加我的laravel組件的骨架到目前為止我已經嘗試過：通過包含Laravel組件來實現Livewire類：publicfunctionplaceh...

來自於 2024-04-06 20:02:10

0

2

543

用 HTML 程式碼（從陣列產生）取代字串的頂級方法 給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...

來自於 2024-04-06 17:40:41

0

2

410

相關專題

更多>

• html版權符號
• html線上編輯器
• html網頁製作
• html空格
• html是什麼
• html字體大小怎麼設定
• html轉txt
• html文字框程式碼怎麼寫

熱門推薦

• url是什麼意思？
• DOM是什麼意思
• 如何改變圖片大小
• HTML中如何將字型加粗
• html圖片大小如何設定

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1426066
• 
  php入門教程之一週學會PHP

  4273714
• 
  JAVA 初級入門影片教學

  2563523
• 
  小甲魚零基礎入門學習Python影片教學

  508974
• 
  PHP 零基礎入門教學

  864922

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1426066次學習
• 
  JAVA 初級入門影片教學

  2563523次學習
• 
  小甲魚零基礎入門學習Python影片教學

  508974次學習
• 
  Web前端開發極速入門

  216109次學習
• 
  零基礎精通 PS 影片教學

  895943次學習

• 
  【web前端】Node.js快速入門

  7968次學習
• 
  國外Web開發全端課程全集

  6335次學習
• 
  Go語言實戰之 GraphQL

  5230次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  722次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  26426次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們 免責聲明 Sitemap

© php.cn All rights reserved