前端開發：HTML（5）—

前端開發：HTML（5）—— 表單

下面我們來學習表單。

什么是Web表單？

表單標簽

1.form標簽

2.輸入框

文本框和密碼框

單選框和復選框

1.單選框

?2.復選框

3.按鈕

（1）普通按鈕

（2）提交按鈕

（3）重置按鈕

?（4）選擇文件

?4.label標簽

5.select標簽

6.textarea標簽

7.特殊字符

什么是Web表單？

Web 表單是使用戶與網站或應用程序之間進行交互。表單允許用戶輸入數據，這些數據通常發送到 Web 服務器進行處理和存儲，或在客戶端使用以以某種方式立即更新界面。簡

簡單來說，我們平時登錄網站時要求輸入賬號密碼，這些操作就是用戶與網站之間的交互；而這個操作的界面就是Web表單。

表單標簽

?利用表單標簽來實現用戶與網站之間的交互。表單可以分成兩個部分：表單域和表單控件。

表單域：包含表單元素的區域。重點了解form標簽。

表單控件：包括輸入框，按鈕等。重點了解input標簽。控件都是使用input標簽實現的。

1.form標簽

我們先創建一個新文件（test0.html）來學習。在form后面要帶上一個action屬性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""></form>
</body>
</html>

然后點擊運行，我們創建了一個表單。在網頁按 fn + F12 打開控制臺窗口，?點擊左上角的圖標，我們就能選中html的代碼進行分析。從下圖我們可以看到，form創建了一個表單域。

2.輸入框

input是一個有許多類型的單個標簽。我們可以通過type屬性來確定input的類型。

文本框：text

密碼框：password

單選框：radio

復選框：checkbox

文本框和密碼框

<body><form action=""></form>賬號 <input type="text"> <!--文本框--><br>密碼 <input type="password"> <!--密碼框-->
</body>

運行到網頁之后，我們可以從框中輸入信息。密碼框輸入的信息會呈現加密狀態?。這是我們打開控制臺，將password修改為text，會發現我們輸入的加密信息變為了文本框輸出。

單選框和復選框

1.單選框

單選框之間必須具備相同的name屬性，才能實現多選一的效果。

?加上checked屬性會自動勾選上對應的選項。

性別<input type="radio" name="sex"> 男
<input type="radio" name="sex" checked="checked"> 女

?2.復選框

單選框只能選中一個，因此需要多選框。其操作方式同單選框，將radio換為checkbox即可。

 愛好<input type="checkbox" name="favor"> 音樂<input type="checkbox" name="favor"> 美術<input type="checkbox" name="favor"> 游戲

3.按鈕

（1）普通按鈕

?按鈕屬性為button。按鈕也是在input屬性中進行使用的。button表示控件類型為按鈕，value表示文字說明，onclick為點擊反饋。

<input type="button" value="this is a simple button" onclick="alert('hello')"

點擊運行。我們可以點擊按鈕，點擊后會反饋‘hello’文字。

（2）提交按鈕

提交屬性為submit。提交按鈕必須放在form標簽內部，會將網頁中的信息提交到后臺。我們可以在form的action屬性中添加另一個網頁的網址，點擊提交按鈕后就會將信息提交并跳轉到對應的網址上。

<body><form action="http://www.baidu.com">姓名<input type="text" name="name"><br><br><input type="submit"></form>
</body>

（3）重置按鈕

reset表示將信息重置。在輸入信息后點擊重置按鈕，會將所有數據清空。

 <input type="reset">

?（4）選擇文件

file表示可以從本地選擇文件。與提交按鈕配合可以上傳文件到對應的網址。

<input type="file">

?4.label標簽

label標簽主要作用為提升表單控件的可用性和可訪問性，為表單元素添加關聯的表單控件。例如點擊聚焦，擴大交互區域，提升可訪問性等。關于label標簽后面我們還會遇到，這里就簡單使用label標簽來實現單選按鈕組擴大點擊區域。

我們先寫兩個性別單選框，加上id屬性，為了和label相關聯：

<input type="radio" name="sex" id="male"> 男
<input type="radio" name="sex" id="female"> 女

在label標簽中，要帶一個for屬性，for屬性必須要和單選框的id屬性相匹配才能正確關聯?。然后將文字移到label標簽內。這樣我們在點擊對應文字的時候也能進行選擇了。

<label for="male"> 男 </label>
<input type="radio" name="sex" id="male">
<label for="female"> 女 </label>
<input type="radio" name="sex" id="female">

5.select標簽

select標簽支持我們在多個選項中選擇一項。在select內需要使用option標來確定選項內容。

<select name="" id=""><option value="">--請選擇年份--</option><option value="">--2025--</option><option value="">--2024--</option><option value="">--2023--</option><option value="">--2022--</option><option value="">--2021--</option><option value="">--2020--</option>
</select>

6.textarea標簽

textarea是HTML中用于創建多行純文本輸入區域的表單元素，適用于需要用戶輸入較長文本的情況。其有以下關鍵屬性：

name：（必填）提交表單時的數據鍵名
id：唯一標識符（用于JS/CSS操作或label關聯）
rows：可見文本行數
cols：可見文本列數
placeholder：輸入前的灰色提示文本
maxlength：允許的最大字符數
minlength：允許的最小字符數
wrap：文本的換行方式（soft/hard）?

例如我們創建一個留言評論區：

<label for="comment">留言：</label>
<textarea id="comment" name="user_comment"rows="5" cols="40"placeholder="請輸入您的意見..."maxlength="500"
></textarea>

7.特殊字符

有些特殊字符在html中是不能直接表示的。例如：

空格：&nbsp
小于號：&lt
大于號：&gt
按位與：&amp

?如果我們直接在html中打印空格：

?可以看到直接寫8個空格無法判定。因此我們使用上面的代替符號：

 <p>這里有8個空格&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp空格</p><br>

再次運行就能看到打出了8個空格了。

其他特殊字符以此類推。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/917950.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/917950.shtml
英文地址，請注明出處：http://en.pswp.cn/news/917950.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！