表單元素

• 表單生成首要

  • 需先產生一個form，按鈕、元件都需要在裡面。再分別看客戶需要些甚麼資料下去寫表單元素
  • action是告訴html標籤你裡面的相關資訊，傳送到儲存資料的資料庫位置

  <form action="#">按鈕、元件寫在裡面</form>
  

• 標籤

  <label for="">顯示文字</label>
  

• 文字欄位

  • name中資料會顯示在網址上，提交表單後可從網址上的傳送值得知填的資訊

  <input type="text" name="">
  

• 按鈕 button

  <!--寫法1-->
  <button type="button">我式按鈕</button>
  
  <!--寫法2-->
  <input type="button" class="自訂 也可略" value="我是按鈕">
  

• 按鈕送出:

  • value中的字會顯示在按鈕上

  <input type="submit" value="送出">
  

• Radio Buttons 單選選單 範例
  
  

  • Radio 的 name 請務必設定相同，表這是一組的。

    <input type="radio" id="" name="" value="">
    <lable for=""></lable>
    

  • value 值是用在送出表單後，讓 PHP 等程式讀取用的，網友在網頁上不會看到
  • 參考文章
    • MDN web docs- radio
    • Wibibi HTML form Radio Buttons

• Checkbox 方塊選單 範例
  

  • 可重覆選取
  • name : 如果是相同性質的選項例如興趣， name 就可以設定相同的值。例如: name="interest"
  • value : 每個 checkbox 的 value 值皆不同，方便 PHP 等程式判別勾選了那些
  • 參考文章
    • MDN web docs- checkbox
    • Wibibi HTML form Checkbox

• 下拉式選單：範例

  <select name="">
      <option value=""></option>
  </select>
  

• 多行文字欄位:範例
  -cols 字數，rows行；cols和rows可拿掉用css控制寬高即可; id可省略
  -要記得<textarea>和 </textarea> 之間不可以有空白否則placeholder文字無法顯示 範例

  <textarea name="" id="" cols="30" rows="10"></textarea>
  

表單內文字設定

PURE表單應用教學

• placeholder 用法 範例
  表單格內寫預設文字， 輸入資訊後預設文字會消失
  

• label 用法 1 範例
  -於表格上方顯示表單標題，點選標題標籤label會直接跳到要填寫的表格內input，可直接填寫內容
  

  <form action="#">
      <label for="填入要對應的表單id">填要顯示的表單標題</label>
      <input id="填入與上方label內一樣的id" type="text" name="">
  </form>
  

• label 用法 2 範例

  • 表單與標題呈上至下排列，input[type="text"] 設定display:block;變區塊元素
    

表單常設定的css屬性

• type="text" border、border-radius、color
• 箭頭滑過去會變手型狀 type="button" cursor:pointer;
  • 更多 cursor 用法: MDN web docs-cursor
• 有時因瀏覽器不同，會導致裂版或斷行問題，解決辦法
  1. 到 purecss.io 觀看 css 寫法 ( 為 yahoo 釋出的 css 框架，可解決網頁瀏覽器兼容器的問題 )
  2. 進入 purecss.io 按 " Get Started " 做下載 ( Buttons / Tables / Forms ) 建議這三個 css 可以看熟了解寫法
  3. 可依此寫法為基底下去做自己的版本

表單元素總整理

<form action="#">
    <!--標籤、文字欄位-->
    <label for="填入要對應的表單id">填要顯示的表單標題</label>
    <input id="填入與上方label內一樣的id" type="text" name="">   
    <!--單選選單-->
    <input type="radio" name="" value="">
    <!--方塊選單-->
    <input type="checkbox" name="" value="">
    <!--下拉式選單-->
    <select name="">
        <option value=""></option>
    </select>
    <!--多行文字欄位-->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <!--按鈕送出-->
    <input type="submit" value="送出">
</form>

※ 關於更多表單的寫法可至 PURE.CSS-Forms 內瀏覽