表單


表單的目的是為了跟用戶進行交互,收集用戶資料

 在HTML中,一個完整的表單通常由表單控件(也稱為表單元素)、提示信息和表單域3個部分構成。

表單控件:

包含了具體的表單功能項,如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

提示信息:

一個表單中通常還需要包含一些說明性的文字,提示用戶進行填寫和操作。

表單域:相當於一個容器,用來容納所有的表單控件和提示信息,可以通過他定義處理表單數據所用程序的url地址,以及數據提交到服務器的方法。如果不定義表單域,表單中的數據就無法傳送到后台服務器。

input 控件(重點)

<input />標簽為單標簽,type屬性為其最基本的屬性,其取值有多種,用於指定不同的控件類型。除了type屬性之外,<input />標簽還可以定義很多其他的屬性

label標簽(理解)

label 標簽為 input 元素定義標注(標簽)。

作用: 用於綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢?

for 屬性規定 label 與哪個表單元素綁定。

 

textarea控件(文本域)

如果需要輸入大量的信息,就需要用到<textarea></textarea>標簽。通過textarea控件可以輕松地創建多行文本輸入框,其基本語法格式如下:

<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea>

下拉菜單

使用select控件定義下拉菜單的基本語法格式如下

<select>
 <option>選項1</option>
 <option>選項2</option>
 <option>選項3</option>
...
</select>

注意:

  1. <select></select>中至少應包含一對<option></option>

  2. 在option 中定義selected =" selected "時,當前項即為默認選中項。

 

表單域

在HTML中,form標簽被用於定義表單域,即創建一個表單,以實現用戶信息的收集和傳遞,form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下:

<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>

常用屬性:

  1. Action 在表單收集到信息后,需要將信息傳遞給服務器進行處理,action屬性用於指定接收並處理表單數據的服務器程序的url地址。

  2. method 用於設置表單數據的提交方式,其取值為get或post。

  3. name 用於指定表單的名稱,以區分同一個頁面中的多個表單。

注意: 每個表單都應該有自己表單域。

 

 

通過下面案例來了解表單:

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單</title>
</head>

<body>
    <form action=" " method="get" name="表單1">
        <!-- name,表單元素名字 -->
        <!-- 文本框,用戶可輸入任意文字 -->
        用戶名<input type="text" name="username" value="請輸入用戶名"> <br>
        <!-- 密碼框,用戶看不見輸入密碼 -->
        密碼 <input type="password" name="password"><br>
        <!-- 單選按鈕,實現多選一,必須定義相同的name -->
        性別 男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br>
        <!-- 復選按鈕,可實現多選 -->
        愛好 吃飯<input type="checkbox" name="hobby" value="吃飯"> 睡覺<input type="checkbox" name="hobby" value="睡覺"> 打豆豆<input
            type="checkbox" name="hobby" value="打豆豆"> <br>
        <input type="submit">
        <input type="reset"><br>


        <!-- label標簽 增大選中范圍-->
        <label for="text">用戶名</label>
        <input type="text" id="text" /><br><br>
        <!-- 文本域 -->
        對我們的看法<textarea></textarea>
        <input type="text">


    </form>
</body>

</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM