構建靜態頁面之 [ 表單 ]

時間 2019-12-13

原文原文鏈接

表單

表單元素

`<form>`元素

表示設置表單
action屬性 - 設置接收表單的指定服務器端的地址路徑
method屬性 - 表示發送給服務器端的方式瀏覽器
1. get屬性值（默認值） - 將提交的數據添加到地址欄中進行提交（有限制，不安全）
2. post屬性值 - 將提交的數據綁定在表單中進行提交（沒有限制，相對安全）
name屬性 - 提交表單時要設置name屬性，否則沒法提交表單

<body>
<!--
     form元素 - 表示設置表單
     * action屬性 - 設置接收表單的指定服務器端的地址路徑
     * method屬性 - 表示發送給服務器端的方式
      * get屬性值（默認值） - 將提交的數據添加到地址欄中進行提交（有限制，不安全）
      * post屬性值 - 將提交的數據綁定在表單中進行提交（沒有限制，相對安全）
     * name屬性 - 提交表單時要設置name屬性，否則沒法提交表單
 -->
<form action="#" method="post">
    <input type="text" name="txt">
    <input type="submit">
</form>
</body>

輸入框

`<input>`元素

表示設置表單中的搜索框
type屬性 - 表示定義什麼類型的輸入框安全
1. text屬性值 - 文本框
2. password屬性值 - 密碼框
3. email屬性值 - 郵件輸入框(會有格式要求)
4. url屬性值 - 網址輸入框(會有格式要求)
5. number屬性值 - 定義數字控件(只能輸入數字)

<body>
<!--
     input元素 - 表示設置表單中的搜索框
      * type屬性 - 表示定義什麼類型的輸入框
       * text屬性值 - 文本框
       * password屬性值 - 密碼框
       * email屬性值 - 郵件輸入框(會有格式要求)
       * url屬性值 - 網址輸入框(會有格式要求)
       * number屬性值 - 定義數字控件(只能輸入數字)
       * search - 搜索框(在移動端瀏覽器有效)
       * tel - 電話框(在移動端瀏覽器有效)
 -->
<form action="#">
    <input type="text">
    <input type="password">
    <input type="email">
    <input type="url">
    <input type="number">
    <input type="search">
    <input type="tel">
</form>
</body>

輸入框的屬性

value屬性 - 能夠用來設置或獲取輸入框中的數據內容
placeholder屬性 - 能夠提供使用輸入框的相關信息
autofocus屬性 - 能夠自動獲取焦點，不用點擊輸入框就能夠先選擇輸入框
disabled屬性 - 表示當前輸入框不可用
readonly屬性 - 表示當前輸入框只能讀，不能輸入內容

<form action="#">
    <!--
         value屬性 - 能夠用來 設置 或 獲取 輸入框中的數據內容
         placeholder屬性 - 能夠提供使用輸入框的相關信息
         autofocus屬性 - 能夠自動獲取焦點，不用點擊輸入框就能夠先選擇輸入框
         disabled屬性 - 表示當前輸入框不可用
         readonly屬性 - 表示當前輸入框只能讀，不能輸入內容
     -->
    <input type="text" value="輸入內容">
    <input type="text" placeholder="輸入用戶名">
    <input type="text" autofocus>
    <input type="text" disabled>
    <input type="text" readonly>
</form>
</body>

表單控件

<input>元素 - 能夠設置表單中的控件服務器

type屬性 - 定義控件的類型

date屬性值 - 定義日期控件
month屬性值 - 定義月份控件
week屬性值 - 定義週期控件
color屬性值 - 定義選擇顏色的控件

<body>
<form action="#">
    <!--
        <input>元素 - 能夠設置表單中的控件
        * type屬性 - 定義控件的類型
         * date屬性值 - 定義日期控件
         * month屬性值 - 定義月份控件
         * week屬性值 - 定義週期控件
         * color屬性值 - 定義選擇顏色的控件
         * rang屬性值 - 定義滑動條控件
     -->
    <input type="date">
    <input type="month">
    <input type="week">
    <input type="time">
    <input type="color">
    <input type="range">
</form>
</body>

按鈕

<input>元素 - 能夠設置表單中按鈕，用於實現提交表單、或其餘功能app

type屬性 - 設置按鈕的類型

submit屬性值 - 設置提交按鈕(提交表單)
reset屬性值 - 設置重置按鈕(重置輸入框中的內容)
button屬性值 - 設置普通按鈕

<button>元素 - 表示設置按鈕post

該元素不是表單中的組件
該元素若是被使用在表單中，也具備提交表單的功能

<body>
<form action="#">
    <!--
        <input>元素 - 能夠設置表單中按鈕，用於實現提交表單、或其餘功能
         * type屬性 - 設置按鈕的類型
          * submit屬性值 - 設置提交按鈕(提交表單)
          * reset屬性值 - 設置重置按鈕(重置輸入框中的內容)
          * button屬性值 - 設置普通按鈕
           * 普通按鈕沒有特殊顯示，能夠經過value屬性來設置
     -->
    <input type="submit">
    <input type="reset">
    <input type="button" value="按鈕">
    <!--
        <button>元素 - 表示設置按鈕
        * 該元素不是表單中的組件
        * 該元素若是被使用在表單中，也具備提交表單的功能
     -->
    <button>按鈕</button>
</form>
</body>

圖像組件

<input>元素 - 能夠定義圖像組件ui

type屬性 - 設置圖像組件

image屬性值 - 定義圖像組件
src屬性 - 引入圖像的路徑

經過圖像組件引入的圖片具備提交表單的做用

<body>
<form action="#">
    <!--
        <input>元素 - 能夠定義圖像組件
         * type屬性 - 設置圖像組件
          * image屬性值 - 定義圖像組件
          * src屬性 - 引入圖像的路徑
         * 經過圖像組件引入的圖片具備提交表單的做用
     -->
    <input type="image" src="imgs/180731.jpg">
</form>
</body>

單選框和多選框

單選框 - type屬性的 radio屬性值表示設置單選框
多選框 - type屬性的 checkbox屬性值表示設置多選框
經過 name屬性將多個多選框分爲一組
checked屬性 - 表示默認被選擇項

<body>
<form action="#">
    <!--
         單選框 - type屬性 的 radio屬性值 表示設置單選框
         * 經過 name屬性 將多個單選框分爲一組
         * checked屬性 - 表示默認被選擇項
     -->
    <input type="radio" name="input-rad" checked>我是誰
    <input type="radio" name="input-rad">我在那
    <input type="radio" name="input-rad">我要幹啥

    <br>

    <!--
         多選框 - type屬性 的 checkbox屬性值 表示設置多選框
         * 經過 name屬性 將多個多選框分爲一組
         * checked屬性 - 表示默認被選擇項
     -->
    <input type="checkbox" name="inout-che">手機
    <input type="checkbox" name="inout-che" checked>電腦
    <input type="checkbox" name="inout-che">遊戲機
</form>
</body>

文件域

文件域 - 表示容許用戶在頁面中打開選擇本地文件、上傳本地文件url

accept屬性 - 設置當前接收文件的類型
multiple屬性 - 能夠同時接收多個文件
enctype屬性 - 設置提交表單時的方式

application/x-www-form-urlencoded屬性值（默認值） - 表示以數據的方式提交表單
multipart/form-data屬性值 - 表示將表單以文件的方式提交（在文件域中使用時能夠實現文件上傳）

實現文件上傳

enctype屬性的屬性值只能爲 multipart/form-data
method屬性的屬性值只能爲 post

<body>
<!--
     文件域
     * 容許用戶在頁面中打開選擇本地文件、上傳本地文件
     * accept屬性 - 設置當前接收文件的類型
     * multiple屬性 - 能夠同時接收多個文件
     * enctype屬性 - 設置提交表單時的
     方式
      * application/x-www-form-urlencoded屬性值（默認值） - 表示以數據的方式提交表單
      * multipart/form-data屬性值 - 表示將表單以文件的方式提交（在文件域中使用時能夠實現文件上傳）

     * 實現文件上傳
      * enctype屬性的屬性值只能爲 multipart/form-data
      * method屬性的屬性值只能爲 post
 -->
<form action="#" method="post" enctype="multipart/form-data">
    <input type="file" accept="image/jpeg" multiple>
    <input type="submit">
</form>
</body>

文本域和隱藏域

<textarea>元素 - 表示表單中的文本域

cols屬性 - 表示文本域中的列
rows屬性 - 表示文本域中的行

隱藏域 - 經過type屬性的 hidden屬性值設置

在頁面中沒有任何顯示效果

<body>
<form action="#">
    <!--
        textarea元素 - 表示表單中的文本域
         * cols屬性 - 表示文本域中的列
         * rows屬性 - 表示文本域中的行
     -->
    <textarea cols="30" rows="10"></textarea>

    <br>

    <!--
        隱藏域 - 經過type屬性的 hidden屬性值設置
         * 在頁面中沒有任何顯示效果
     -->
    <input type="hidden">
</form>
</body>

下拉列表

<select>元素 - 表示定義表單中的下拉列表

multiple屬性 - 能夠將單選列表變成多選列表
size屬性 - 表示多選列表的顯示個數

<option>元素 - 表示下拉列表中的選項

selected屬性 - 表示當前列表中默認被選中的選項

<optgroup>元素 - 另外一種多選列表，能夠對選項進行分類

<body>
<form action="#">
    <!--
         select元素 - 表示定義表單中的下拉列表
          * multiple屬性 - 能夠將單選列表變成多選列表
          * size屬性 - 表示多選列表的顯示個數
         option元素 - 表示下拉列表中的選項
          * selected屬性 - 表示當前列表中默認被選中的選項
         optgroup元素 - 另外一種多選列表，能夠對選項進行分類
     -->
    <!-- 單選列表 -->
    <select>
        <option selected>手機</option>
        <option>電腦</option>
        <option>遊戲機</option>
    </select>

    <!-- 多選列表 -->
    <select multiple size="3">
        <option selected>手機</option>
        <option>電腦</option>
        <option>遊戲機</option>
    </select>

    <!-- 另外一種多選列表 -->
    <select multiple>
        <optgroup>
            <option selected>我是誰</option>
            <option>我在那</option>
            <option>我要幹啥</option>
        </optgroup>
        <optgroup>
            <option selected>你誰呀</option>
            <option>你要幹啥</option>
            <option>站那別動</option>
        </optgroup>
    </select>
</form>
</body>

組合表單元素

<fieldse>t元素 - 表示對錶單中的組件進行分組
<legend>元素 - 表示對分組的組件設置標題
<fieldset>元素和 <legend>元素須要配合使用

<body>
<form action="#">
    <!--
         fieldset元素 - 表示對錶單中的組件進行分組
         legend元素 - 表示對分組的組件設置標題
         * fieldset元素 和 legend元素 須要配合使用
     -->
    <fieldset>
        <legend>查詢</legend>
        <input type="text">
        <input type="submit">
    </fieldset>
</form>
</body>

表單驗證

表單驗證 - 在表單提交前對錶單中數據進行驗證code
1. 符合驗證 - 提交表單
2. 不符合驗證 - 給出提示，按條件修改
驗證屬性orm
1. required屬性 - 表示驗證當前組件中的內容是否爲空
2. minlength屬性 - 表示當前組件中的內容（文本）最小長度（字或字母的個數）
3. maxlength屬性 - 表示當前組件中的內容（文本）最大長度（字或字母的個數）
4. min屬性 - 表示當前組件中的內容是否小於min的值（使用在數字輸入框）
5. max屬性 - 表示當前組件中的內容是否大於min的值（使用在數字輸入框）
6. step屬性 - 表示當前組件中的內容每次增長或減小的數值（使用在數字輸入框）
表單中也有一些輸入框自帶驗證效果遊戲
1. 郵件輸入框 - 按照郵箱地址的要求輸入
2. 網址輸入框 - 按照網址的要求輸入
3. 數字輸入框 - 只能輸入數字
4. 顏色輸入框 - 只能規定顏色