首頁 > 博客列表 > html表單基礎(chǔ)實(shí)戰(zhàn)

博主信息

博文 9

粉絲 0

評(píng)論 0

訪問量 5992

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

表單基礎(chǔ)

在html中，通常把form標(biāo)簽稱為表單
表單不會(huì)對(duì)頁面樣式產(chǎn)生任何影響，但它會(huì)影響頁面的行為
它可以將表單中的數(shù)據(jù)，使用指定的請(qǐng)求方式（get或post），提交到指定的服務(wù)器地址。

1. 表單的基本構(gòu)造

<form>標(biāo)簽用于創(chuàng)建供用戶輸入的 HTML 表單，我們也必須要把所有表單標(biāo)簽放在form標(biāo)簽內(nèi)部。

語法

<form>
  <!--各種表單元素-->
</form>

舉例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表單基礎(chǔ)</title>
</head>
<body>
  <form>
      <div>
          <label for="name">用戶名</label>
          <input type="text" id="name" />
      </div>
  </form>
</body>
</html>

2. 常用表單元素

<fieldset>表單控件的分組
- <legend> 標(biāo)簽為 <fieldset> 元素定義標(biāo)題。
<label>標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

注意：<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
<input>標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。

用來聲明允許用戶輸入數(shù)據(jù)的 input 控件。輸入字段可通過多種方式改變，取決于 type 屬性。
<select>元素用來創(chuàng)建下拉列表。
<option>標(biāo)簽定義下拉列表中的一個(gè)選項(xiàng)。
<optgroup>標(biāo)簽經(jīng)常用于把相關(guān)的選項(xiàng)組合在一起。
<textarea>標(biāo)簽定義一個(gè)多行的文本輸入控件。
- 文本區(qū)域中可容納無限數(shù)量的文本，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier）。
- 可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
<button>標(biāo)簽定義一個(gè)按鈕。

元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用<input> 元素創(chuàng)建的按鈕之間的不同之處。

3. 表單元素常用屬性

屬性名稱	所訴元素	屬性說明
action	`<form>`	處理表單數(shù)據(jù)的腳本
method	`<form>`	表單的提交方式, get(默認(rèn)),post
for	`<label>`	綁定相關(guān)元素的id
placeholder	`<input>`	placeholder 屬性規(guī)定可描述輸入 `<input>` 字段預(yù)期值的簡短的提示信息。
selected	`<option>`	默認(rèn)選中
checked	`<input type="radio" />`、`<input type="checkbox" >`	默認(rèn)選中
value	通用	定義送往服務(wù)器的選項(xiàng)值。
autofocus	通用	頁面初始化/加載成功時(shí),焦點(diǎn)自動(dòng)落入
required	通用	必填項(xiàng), 不寫不能提交。注釋（只有名稱沒有值的屬性叫:布爾屬性(只要寫上就是true,不寫就是false) ）
disabled	通用	禁用
id	通用	規(guī)定元素的唯一 id
class	通用	規(guī)定元素的類名（classname）
style	通用	定元素的行內(nèi)樣式（inline style）
name	通用	name是提交互服務(wù)器上的變量名
type	`<input>`、`<button>`	規(guī)定元素的類型

4. `<input>`元素type類型

類型名稱	類型說明
button	定義可點(diǎn)擊的按鈕（通常與 JavaScript 一起使用來啟動(dòng)腳本）。
checkbox	定義復(fù)選框。
colorNew	定義拾色器
dateNew	定義 date 控件（包括年、月、日，不包括時(shí)間）。
datetimeNew	定義 date 和 time 控件（包括年、月、日、時(shí)、分、秒、幾分之一秒，基于 UTC 時(shí)區(qū)）。
datetime-localNew	定義 date 和 time 控件（包括年、月、日、時(shí)、分、秒、幾分之一秒，不帶時(shí)區(qū)）。
emailNew	定義用于 e-mail 地址的字段。
file	定義文件選擇字段和 “瀏覽…” 按鈕，供文件上傳。
hidden	定義隱藏輸入字段。
image	定義圖像作為提交按鈕。
monthNew	定義 month 和 year 控件（不帶時(shí)區(qū)）。
numberNew	定義用于輸入數(shù)字的字段。
password	定義密碼字段（字段中的字符會(huì)被遮蔽）。
radio	定義單選按鈕。
rangeNew	定義用于精確值不重要的輸入數(shù)字的控件（比如 slider 控件）。
reset	定義重置按鈕（重置所有的表單值為默認(rèn)值）。
searchNew	定義用于輸入搜索字符串的文本字段。
submit	定義提交按鈕。
telNew	定義用于輸入電話號(hào)碼的字段。
text	默認(rèn)。定義一個(gè)單行的文本字段（默認(rèn)寬度為 20 個(gè)字符）。
timeNew	定義用于輸入時(shí)間的控件（不帶時(shí)區(qū)）。
urlNew	定義用于輸入 URL 的字段。
weekNew	定義 week 和 year 控件（不帶時(shí)區(qū)）

5. `<button>`type類型

類型名稱	類型說明
submit	提交按鈕
button	可點(diǎn)擊的按鈕
reset	重置按鈕（清除表單數(shù)據(jù)）。

6. 實(shí)例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單基礎(chǔ)</title>
    <style>
        form{
            width: 40%;
            margin: 0 auto;
        }
        form div{
            width: 80%;
            margin: 10px auto;
        }   input[type="text"],input[type="password"],input[type="email"]{
            width: 80%;
        }
        button{
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>用戶注冊(cè)</legend>
            <div>
                <label for="uname">用戶名：</label>
                <input type="text" placeholder="用戶名不能少于6位，且只能以英文字母開頭" id="uname" name="username" autofocus required>
            </div>
            <div>
                <labe for="email">郵&nbsp;&nbsp;&nbsp;箱：</label>
                <input type="email" name="email" id="email" placeholder="admin@admin.com" required>
            </div>
            <div>
                <label for="pwd">密&nbsp;&nbsp;&nbsp;碼：</label>
                <input type="password" name="password" id="pwd" required placeholder="密碼必須包含大小寫以及數(shù)字，且不小于8位" />
            </div>
            <div>
                <label for="age">年&nbsp;&nbsp;&nbsp;齡：</label>
                <input type="number" id="age" name="age" min="18" max="120" />
            </div>
            <div>
                <label for="birthday">生&nbsp;&nbsp;&nbsp;日：</label>
                <input type="date" id="birthday" value="1997-11-05" name="birthday" min="1949-10-01" />
            </div>
            <div >
                <label for="male">性&nbsp;&nbsp;&nbsp;別:</label>
                <input type="radio" name="sex" value="male" id="male" checked /><label for="male">男</label>
                <input type="radio" name="sex" value="female" id="female" /><label for="female">女</label>
                <input type="radio" name="sex" value="secret" id="secret" /><label for="secret">保密</label>
            </div>
            <div>
                <label>愛好:</label>
                <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label>
                <input checked type="checkbox" name="hobby[]" value="program" id="programe" /><label for="program"
                  >編程</label
                >
                <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">攝影</label>
                <input checked type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">游戲</label>
            </div>
            <div>
                <label for="">學(xué)歷:</label>
                <select name="edu" id="">
                  <option value="1">中學(xué)</option>
                  <option value="2" selected>大學(xué)</option>
                  <option value="2">大學(xué)</option>
                  <option value="3">博士</option>
                </select>
              </div>
              <div>
                <button>提交</button>
              </div>
        </fieldset>
    </form>
</body>
</html>

實(shí)列效果截圖
7. 注意事項(xiàng)
1. radio中的 name 必須全部相同,因?yàn)閚ame是提交互服務(wù)器上的變量名,只有全部相同,才能保證數(shù)據(jù)的唯一性。
2. checkbox中name全部相同,只會(huì)返回一個(gè)值,而復(fù)選框必須返回多個(gè)值,哪怕沒有值,也是一個(gè)空集合，將name的名稱后面加上 [],寫成數(shù)組的語法。
3. 下拉列表: 從一組預(yù)置的值選擇一個(gè)或多個(gè)返回，所以,變量的名稱與值不在同一個(gè)元素上。名稱綁定在<selected>上，值在<option>z中。

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

chrome安裝以及插件的安裝

2023-03-09 23:05:37

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

表單基礎(chǔ)

1. 表單的基本構(gòu)造

2. 常用表單元素

`<fieldset>`表單控件的分組

`<label>`標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

注意：`<label>` 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。

`<input>`標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。

`<select>`元素用來創(chuàng)建下拉列表。

`<option>`標(biāo)簽定義下拉列表中的一個(gè)選項(xiàng)。

`<optgroup>`標(biāo)簽經(jīng)常用于把相關(guān)的選項(xiàng)組合在一起。

`<textarea>`標(biāo)簽定義一個(gè)多行的文本輸入控件。

`<button>`標(biāo)簽定義一個(gè)按鈕。

3. 表單元素常用屬性

4. `<input>`元素type類型

5. `<button>`type類型

6. 實(shí)例代碼

實(shí)列效果截圖

7. 注意事項(xiàng)

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

表單基礎(chǔ)

1. 表單的基本構(gòu)造

2. 常用表單元素

<fieldset>表單控件的分組

<label>標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

注意：<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。

<input>標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。

<select>元素用來創(chuàng)建下拉列表。

<option>標(biāo)簽定義下拉列表中的一個(gè)選項(xiàng)。

<optgroup>標(biāo)簽經(jīng)常用于把相關(guān)的選項(xiàng)組合在一起。

<textarea>標(biāo)簽定義一個(gè)多行的文本輸入控件。

<button>標(biāo)簽定義一個(gè)按鈕。

3. 表單元素常用屬性

4. <input>元素type類型

5. <button>type類型

6. 實(shí)例代碼

實(shí)列效果截圖

7. 注意事項(xiàng)

`<fieldset>`表單控件的分組

`<label>`標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

注意：`<label>` 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。

`<input>`標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。

`<select>`元素用來創(chuàng)建下拉列表。

`<option>`標(biāo)簽定義下拉列表中的一個(gè)選項(xiàng)。

`<optgroup>`標(biāo)簽經(jīng)常用于把相關(guān)的選項(xiàng)組合在一起。

`<textarea>`標(biāo)簽定義一個(gè)多行的文本輸入控件。

`<button>`標(biāo)簽定義一個(gè)按鈕。

4. `<input>`元素type類型

5. `<button>`type類型