表單的練手及文檔

表單介紹

表單是HTML中最重要的一部分
99%的網絡攻擊都是通過表單發(fā)起的

表單需要做到熟練操作/使用
MDN關于表單的介紹

常用標簽

1 <form>: 表單控件的容器
2 <fieldset>: 表單控件分組容器
3 <label>: 控件標簽名稱
4 <input>: 輸入控件,類型由 type 屬性決定
5 <select>+<option>: 下載列表框
6 <input>+<datalist>+<option>: 預定義列表框
7 <textarea>: 文本域(多行文本框)
8 <button>: 按鈕,默認同步提交(type=”submit”)

常用屬性

form.id: 表單引用
form.action: 表單處理腳本
form.method: 表單提交方式(GET/POST)
form.enctype: 表單數據編碼方式
form.onsubmit: 表單提交事件
input.type: 輸入控件類型
input.type="text": 單行文本框(默認)
input.type="email": 郵箱控件
input.type="password": 密碼控件(密文)
input.type="number": 數值控件
input.type="date": 日期控件
input.type="color": 拾色器
input.type="url": URL 控件
input.type="search": 搜索框控件
input.type="hidden": 隱藏域控件
input.type="file": 文本域控件
input.type="radio": 單選按鈕
input.type="checkbox": 復選框
select.name+option.value: 下拉列表框
input.list+datalist.id: 預定義列表框
textarea.cols/rows: 文本域(多行文本框)
button.type: 按鈕(默認提交:type=”submit”)

代碼案例

<!-- 表單登錄與注冊示例-->
<!-- 創(chuàng)建一個表單控件 action表示控件內的信息提交到那個文件進行判斷
method表示這個控件用什么方式進行提交get/post
-->
<form action="login.php" method="post">
<fieldset>
  <!-- 一個標題 -->
  <legend>用戶登錄</legend>
  <!-- for=id的內容即可實現聯(lián)動，點擊賬號可定位到input輸入框內
  方便用戶直接進行輸入。
  -->
  <div class="user">
    <label for="user">賬號：</label>
    <input type="text" id="user" name="user" placeholder="請輸入賬號" />
  </div>
  <!-- name內的內容為表單提交的時候的名稱-password=用戶輸入的密碼 -->
  <div class="password">
    <label for="paw" name="password">密碼：</label>
    <input
      type="password"
      id="paw"
      name="password"
      placeholder="請輸入密碼"
    />
  </div>
  <!-- 登錄按鈕 -->
  <button>登錄</button>
</fieldset>
</form>
<form action="login.php" method="post">
<fieldset>
  <legend>用戶注冊</legend>
  <div class="my-user">
    <!-- 使用占位符達到美觀性，其實沒啥用&#12288; -->
    <label for="user">賬&#12288;&#12288;號：</label>
    <input type="text" id="user" placeholder="請輸入賬號" />
  </div>
  <div class="my-email">
    <label for="email">郵&#12288;&#12288;箱：</label>
    <input type="email" id="email" placeholder="請輸入郵箱" />
  </div>
  <div class="password">
    <label for="paw">密&#12288;&#12288;碼：</label>
    <input type="password" id="paw" placeholder="請輸入密碼" />
  </div>
  <div class="password">
    <label for="pasw">確認密碼：</label>
    <input type="password" id="pasw" placeholder="請確認密碼" />
  </div>
  <div class="my-date">
    <label for="date">生&#12288;&#12288;日：</label>
    <input type="date" id="date" />
  </div>
  <div class="my-date">
    <label for="">愛&#12288;&#12288;好：</label>
    <input type="radio" id="zuqiu" />
    <label for="zuqiu">足球</label>
    <input type="radio" id="lanqiu" />
    <label for="lanqiu">籃球</label>
    <input type="radio" id="yumaoqiu" />
    <label for="yumaoqiu">羽毛球</label>
  </div>
  <div class="jieshao">
    <label for="jieshao">自我介紹</label>
    <textarea
      name=""
      id="jieshao"
      cols="30"
      rows="10"
      class="cols"
      placeholder="介紹下自己吧??！"
    ></textarea>
  </div>
  <button>注冊</button>
</fieldset>
</form>