WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-17. 留言聯絡: 留言表單的設計運用

運用 Google 雲端硬碟中的 google form 表單。

 

認識 form 表單及其相關元素(參考:w3schoolsrunoob)。

一份表單需要先有 <form> 標籤

<form>
  表單內容元素:input、select、textarea....
</form>

以下是表單內容元素, type是欄位類型, name屬性是程式傳資料需要的, class屬性是CSS需要的

文字輸入欄位

<form>
  姓名:<input type="text" name="myname" class="myname">
</form>
[結果] 姓名:

單選鈕欄位

<form>
  性別:
  <input type="radio" name="sex" value=""><input type="radio" name="sex" value=""></form>
[結果] 性別:

複選核取方塊欄位

<form>
  喜歡:
  <input type="checkbox" name="mylove1" value=""> 平面設計
  <input type="checkbox" name="mylove2" value=""> 網頁設計
</form>
[結果] 喜歡: 平面設計 網頁設計

下拉式選單欄位

<form>
  汽車品牌:
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab"> Saab </option>
    <option value="fiat"> Fiat </option>
    <option value="audi"> Audi </option>
  </select>
</form>
[結果] 汽車品牌:

文字區塊輸入欄位

<form>
  留言內容:
  <textarea rows="5" cols="50"></textarea>
</form>
[結果] 留言內容:

 

參考:客製Google表單,美化表單樣式

 

 

go TOP