深圳網(wǎng)站制作服濰坊在線(xiàn)制作網(wǎng)站
目錄
HTML 入門(mén)手冊(cè)(一)
10-表單
11-input標(biāo)簽
11.1文本框 (text)
11.2密碼框 (password)
11.3單選按鈕 (radio)
11.4復(fù)選框 (checkbox)
11.5普通按鈕
11.6提交按鈕 (submit)
11.7重置按鈕 (reset)
11.9文件上傳 (file)
11.10數(shù)字輸入 (number)
11.11日期輸入 (date)
13-下拉框
單選下拉框
多選下拉框
默認(rèn)選中
下拉框組
14-多行文本textarea標(biāo)簽
15-多媒體
音頻（audio）
視頻（video）
HTML 入門(mén)手冊(cè)(一)
10-表單
????????表單用于向服務(wù)器傳輸數(shù)據(jù)。form 元素是塊級(jí)元素，其前后會(huì)產(chǎn)生折行表單提交時(shí)，必須設(shè)置表單元素的name屬性值，否則無(wú)法獲取數(shù)據(jù)。表單需要結(jié)合表單元素一起使用。
常用屬性
-
action 提交表單的地址
- method 提交方式 (不區(qū)別大小)
-
GET提交 get
-
POST提交 post
-
- target 提交數(shù)據(jù)時(shí)打開(kāi)窗口的方式
-
當(dāng)前窗口 _self
-
新(空白)窗口 _blank
-
????<body><form?action="https://shuaici.blog.csdn.net/"?method="get"?target="_blank"><!--?表單中的輸入元素放在這里?--><label?for="username">用戶(hù)名:</label><input?type="text"?id="username"?name="username"?required><label?for="password">密碼:</label><input?type="password"?id="password"?name="password"?required><input?type="submit"?value="提交按鈕"></form></body>
-
action 屬性指定了表單數(shù)據(jù)將被提交的目標(biāo)URL。
-
method 屬性指定了提交數(shù)據(jù)的HTTP方法。
-
target 提交數(shù)據(jù)時(shí)打開(kāi)窗口的方式。
-
label 元素用于標(biāo)簽文本，提供了對(duì)應(yīng)輸入元素的描述。
-
input 元素用于創(chuàng)建不同類(lèi)型的輸入字段，例如文本框和密碼框。
-
required 屬性用于指示輸入字段為必填項(xiàng)。
-
type="submit" 的
<input>元素創(chuàng)建了提交按鈕。
表單中還可以包含其他類(lèi)型的輸入元素，如單選按鈕、復(fù)選框、文本域等。
Get
POST
GET請(qǐng)求與POST請(qǐng)求的區(qū)別:
-
GET用于獲取資源，而POST用于提交數(shù)據(jù)。
-
GET請(qǐng)求的數(shù)據(jù)附在URL中，POST請(qǐng)求的數(shù)據(jù)在請(qǐng)求主體中。
-
GET請(qǐng)求適用于無(wú)副作用的操作，POST請(qǐng)求適用于有副作用的操作。
-
GET請(qǐng)求的數(shù)據(jù)對(duì)用戶(hù)可見(jiàn)，安全性較低；POST請(qǐng)求的數(shù)據(jù)對(duì)用戶(hù)不可見(jiàn)，相對(duì)更安全。
-
GET請(qǐng)求可被緩存，可以被書(shū)簽保存；POST請(qǐng)求不可被緩存，不會(huì)被保存到書(shū)簽中。
-
GET請(qǐng)求在URL中傳遞的數(shù)據(jù)有長(zhǎng)度限制，POST理論上沒(méi)有限制。
11-input標(biāo)簽
-
<input>標(biāo)簽規(guī)定了用戶(hù)可以在其中輸入數(shù)據(jù)的輸入字段。 -
<input>元素在<form>元素中使用，用來(lái)聲明允許用戶(hù)輸入數(shù)據(jù)的 input 控件。
輸入字段可通過(guò)多種方式改變，取決于 type 屬性。如下：
-
button
-
checkbox
-
color
-
date
-
datetime
-
datetime-local
-
email
-
file
-
hidden
-
image
-
month
-
number
-
password
-
radio
-
range
-
reset
-
search
-
submit
-
tel
-
text
-
time
-
url
-
week
????????以下是常見(jiàn)的 <input> 類(lèi)型：
11.1文本框 (text)
????????用于單行文本輸入。
<input?type="text"?name="username"?placeholder="輸入用戶(hù)名">
11.2密碼框 (password)
????????用于輸入密碼，文本將被遮蔽。
<input?type="password"?name="password"?placeholder="輸入密碼">
11.3單選按鈕 (radio)
????????用于從一組選項(xiàng)中選擇一個(gè)。name="gender"確定為同一組。
性別：
<input?type="radio"?name="gender"?value="男">?男
<input?type="radio"?name="gender"?value="女">?女
11.4復(fù)選框 (checkbox)
????????用于選擇一個(gè)或多個(gè)選項(xiàng)。
愛(ài)好：<input?type="checkbox"?name="subscribe"?value="yes">聽(tīng)歌
<input?type="checkbox"?name="subscribe"?value="yes">看書(shū)
<input?type="checkbox"?name="subscribe"?value="yes">吹牛
11.5普通按鈕
????????用于提交表單數(shù)據(jù)。
<input?type="button"?value="普通按鈕">
11.6提交按鈕 (submit)
????????用于提交表單數(shù)據(jù)。
<input?type="submit"?value="提交按鈕">
11.7重置按鈕 (reset)
????????用于重置表單中的所有字段為默認(rèn)值。
<input?type="reset"?value="重置按鈕">
11.8隱藏域 (hidden)
????????用于存儲(chǔ)不希望用戶(hù)看到的數(shù)據(jù)，通常用于在提交表單時(shí)傳遞額外的信息。
<input?type="hidden"?name="user_id"?value="15">
11.9文件上傳 (file)
????????用于用戶(hù)選擇并上傳文件。
<input?type="file"?name="file_upload">
11.10數(shù)字輸入 (number)
????????用于接受數(shù)字輸入，可以設(shè)置最小值、最大值和步長(zhǎng)。
????step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。
<input?type="number"?name="quantity"?min="1"?max="100"?step="3"?value="1">
11.11日期輸入 (date)
????????用于選擇日期。
<input?type="date"?name="birthdate">
12-button標(biāo)簽
???<button> 元素用于在HTML文檔中創(chuàng)建按鈕。它是與<input>元素中的type="button"相似，但提供了更多的靈活性，可以包含文本、圖像、甚至其他HTML元素。
常用屬性
- type 這個(gè)跟
<input>類(lèi)似。-
button 普通按鈕
-
submit 提交按鈕
-
reset 重置(表單)按鈕
-
-
name 名稱(chēng)
-
value 值
name 和 value 通常在將表單數(shù)據(jù)提交到服務(wù)器時(shí)使用。
????????<form?action="https://shuaici.blog.csdn.net/"?method="get"?target="_blank">用戶(hù)名：<input?type="text"?name="username"?placeholder="輸入用戶(hù)名"><br>密碼：<input?type="password"?name="password"?placeholder="輸入密碼"><br><button?type="button">普通按鈕</button><br><button?type="submit"?name="submitBtn"?value="submit">提交按鈕</button><br><button?type="reset">重置按鈕</button></form>
????????總體而言，<button>元素是在HTML中創(chuàng)建按鈕的一種靈活而強(qiáng)大的方式，可以用于執(zhí)行JavaScript函數(shù)、提交表單或其他交互性操作。
13-下拉框
????????下拉框（也稱(chēng)為下拉菜單或選擇框）是HTML中的 <select> 元素的一種表單元素，它允許用戶(hù)從一組選項(xiàng)中選擇一個(gè)。下拉框通常與 <option> 元素一起使用，每個(gè) <option> 表示下拉框中的一個(gè)選項(xiàng)。
????????經(jīng)常用于選擇列表、國(guó)家/地區(qū)、產(chǎn)品等。
單選下拉框
????????<form?action="https://shuaici.blog.csdn.net/"?method="get"?target="_blank">城市：<select?name="city"?><option?value="sh">上海</option><option?value="bj">北京</option><option?value="gz">廣州</option><option?value="sz">深圳</option></select><br><br><button?type="submit">提交按鈕</button></form>
注：如果option不設(shè)置value="xx"那邊提交的時(shí)候會(huì)把option對(duì)應(yīng)的值帶上。
<select?name="city"?><option?>上海</option><option?value="bj">北京</option><option?value="gz">廣州</option><option?value="sz">深圳</option></select>
多選下拉框
????????如果你想要允許用戶(hù)選擇多個(gè)選項(xiàng)，可以添加 multiple 屬性：
<select?name="color"?multiple>。。。。。
</select>
????????用戶(hù)可以按住 Ctrl（在Windows和Linux中）或 Command（在Mac中）鍵來(lái)選擇多個(gè)選項(xiàng)。
默認(rèn)選中
????????使用 selected 屬性來(lái)設(shè)置下拉框的默認(rèn)選項(xiàng)。
<select?name="city">?????????????<option?value="bj"?selected>北京</option>......
</select>
下拉框組
????????使用 <optgroup> 元素創(chuàng)建下拉框中的分組
<select?name="city"><optgroup?label="國(guó)內(nèi)"><option?value="sh">上海</option><option?value="bj">北京</option><option?value="gz">廣州</option><option?value="sz">深圳</option></optgroup><optgroup?label="國(guó)外"><option?value="hsd">花生燉</option><option?value="lsj">落山雞</option><option?value="ld">亂燉</option></optgroup>
</select>
14-多行文本textarea標(biāo)簽
????????<textarea> 標(biāo)簽用于在HTML中創(chuàng)建多行文本輸入框，允許用戶(hù)輸入多行文本。與單行文本框 <input type="text"> 不同，<textarea> 允許用戶(hù)輸入多行文本，適用于用戶(hù)輸入大段文本或留言等場(chǎng)景。
<!DOCTYPE?html>
<html><head><meta?charset="utf-8"><title>多行文本</title></head><body>姓名：<input?type="text"><br><br><br>意見(jiàn)：<textarea?name="feedback"?id="feedback"?cols="30"?rows="5"?>Please?input?your?opinion</textarea></body>
</html>
-
name： 定義文本域的名稱(chēng)，用于在表單提交時(shí)標(biāo)識(shí)該字段。
-
rows： 定義文本域的行數(shù)，指定可見(jiàn)的文本行數(shù)。
-
cols： 定義文本域的列數(shù)，指定每行可見(jiàn)的字符數(shù)。
-
readonly： 如果設(shè)置為 readonly，則文本域?qū)⒅蛔x，用戶(hù)無(wú)法編輯。
-
disabled： 如果設(shè)置為 disabled，則文本域?qū)⒔?#xff0c;用戶(hù)無(wú)法編輯，并且在表單提交時(shí)不會(huì)提交其值。
15-多媒體
????????多媒體元素在HTML中用于嵌入各種媒體內(nèi)容，如圖像、音頻和視頻。圖像之前寫(xiě)到了，這里咱們直接看音視頻
音頻（audio）
????<body><!--?圖片?--><img?src="file:///Users/scc/Downloads/ic_qq.webp"?alt="加載失敗提示"><!--?音頻?--><audio?controls><source?src="file:///Users/scc/Downloads/demo.aac"?type="audio/mp3">你的瀏覽器不支持音頻播放。</audio></body>-
controls： 啟用瀏覽器提供的音頻控件，如播放、暫停、音量控制等。 -
<source>： 指定音頻文件的URL和類(lèi)型，以便瀏覽器選擇支持的格式。
視頻（video）
<!--?視頻?-->
<video?width="300"?height="400"?controls><source?src="file:///Users/scc/Downloads/142_1705650237.mp4"?type="video/mp4">你的瀏覽器不支持視頻播放。
</video>
-
width 和 height： 視頻播放器的寬度和高度。
-
controls： 啟用瀏覽器提供的視頻控件，如播放、暫停、全屏等。
-
<source>： 指定視頻文件的URL和類(lèi)型，以便瀏覽器選擇支持的格式。
叮，已入門(mén)。