HTML20_HTML表單標籤4

花溪月影發表於2024-06-03
HTML

一、概念

　用於採集使用者輸入的資料的。用於和伺服器進行互動。

二、form標籤

　用於定義表單的。可以定義一個範圍，範圍代表採集使用者資料的範圍
　1、form屬性：
　　　　action：指定提交資料的URL
　　　　　　method：指定提交方式
　　　　　　　　分類：一共7種，2種比較常用
　　　　　　　　　　1. get：
　　　　　　　　　　　　1. 請求引數會在位址列中顯示。會封裝到請求行中(HTTP協議後講解)。
　　　　　　　　　　　　2. 請求引數大小是有限制的。
　　　　　　　　　　　　3. 不太安全。
　　　　　　　　　　2. post：
　　　　　　　　　　　　1. 請求引數不會再位址列中顯示。會封裝在請求體中(HTTP協議後講解)
　　　　　　　　　　　　2. 請求引數的大小沒有限制。
　　　　　　　　　　　　3. 較為安全。

　　2、表單項中的資料要想被提交：必須指定其name屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單標籤</title>
</head>
<body>
    <form action="#" method="post">
        使用者名稱：<input name="username"><br>
        密碼：<input name="password"><br>
        <input type="submit" value="登入">
    </form>
</body>
</html>

三、表單項標籤

　1、input：可以透過type屬性值，改變元素展示的樣式

　　1. type屬性

    • text：文字輸入框，預設值

　　　　　　　　placeholder：指定輸入框的提示資訊，當輸入框的內容發生變化，會自動清空提示資訊

    • password：密碼輸入框
    • radio：單選框

　　　　　　　注意：
　　　　　　　　1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
　　　　　　　　2. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
　　　　　　　　3. checked屬性，可以指定預設值

    • checkbox：核取方塊

　　　　　　　注意：

        　1. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值
      • 　2. checked屬性，可以指定預設值
    • file：檔案選擇框
    • hidden：隱藏域，用於提交一些資訊。
    • 按鈕：
      • submit：提交按鈕。可以提交表單
      • button：普通按鈕
      • image：圖片提交按鈕，src屬性指定圖片的路徑

　2、label：指定輸入項的文字描述資訊
　　　　注意：
　　　　　　label的for屬性一般會和 input的id屬性值對應。如果對應了，則點選label區域，會讓input輸入框獲取焦點。
　3、select: 下拉選單
　　　　子元素：option，指定列表項，value屬性指定提交子元素值
　4、textarea：文字域
　　　　cols：指定列數，每一行有多少個字元
　　　　rows：預設多少行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單標籤</title>
</head>
<body>

    <form action="#" method="get">
        <label for="username">使用者名稱</label>：<input type="text" name="username" placeholder="請輸入使用者名稱" id="username"><br>
        密碼：<input type="password" name="password" placeholder="請輸入密碼"><br>
        性別：<input type="radio" name="gendar" value="male"> 男
             <input type="radio" name="gendar" value="female" checked> 女
        <br>
        愛好：<input type="checkbox" name="hobby" value="shopping" checked>逛街
            <input type="checkbox" name="hobby" value="java" checked>java
            <input type="checkbox" name="hobby" value="game">遊戲
        <br>
        圖片：<input type="file" name="file">
        <br>
        隱藏域：<input type="hidden" name="id" value="aaa">
        <br>
        取色器：<input type="color" name="color"><br>
        生日：<input type="date" name="birthday"><br>
        生日：<input type="datetime-local" name="birthday"><br>
        郵箱：<input type="email" name="email"><br>
        年齡：<input type="number" name="age"><br>
        省份：
        <select name="province">
            <option value="">--請選擇--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">廣州</option>
        </select>
        <br>
        自我描述：<textarea cols="20" rows="5" name="des"></textarea>
        <br>
        <input type="submit" value="登入">
        <input type="button" value="一個按鈕"><br>
        <input type="image" src="image/icon_1.jpg"><br>

    </form>
</body>
</html>

　　

四、案例：註冊頁面

　　

相關文章