iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 18
0

在整個網站裡,form 表單會出現在不少地方,最常看到的是在聯絡我們那頁。

以聯絡我們來舉例,基本的表單如下:

<form action="" method="post">
  <ul>
    <li>
      <label for="name">姓名:</label>
      <input type="text" id="name">
    </li>
    <li>
      <label for="email">Email:</label>
      <input type="text" id="email">
    </li>
    <li>
      <label for="message">留言:</label>
      <textarea name="" id="message" cols="30" rows="5"></textarea>
    </li>
    <li>
      <input type="submit" value="確認送出">
      <input type="reset" value="清除重填">
    </li>
  </ul>
</form>

form

form 的基本結構,外圍就是 <form> tag,action="" 是表單傳送過去的目的地,method就是表單傳送的方法。

然後內部會是一個 label 搭配一個 input 的方式
上面例子裡會用 li 包 label 與 input,主要是因為方便樣式的製作。

label、input

input 的 type 有
text | password | checkbox | radio | submit | reset | file | hidden | image | button

基本上表單的 input 會搭配 label 一起使用,在網頁上 label 不會呈現任何效果,但是搭配 input 使用時,在 label 上加上 for ,而 input 加上 id ,這樣可以讓 label 與 input 互相指定,當滑鼠點到 label 包覆的文字,就能使游標指到 input 上面。

例如:
<label for="name">姓名:</label>
<input type="text" id="name">

將 label 跟 input 用 li 或 div 包起來,再將 label 跟 input 設為 display:inline-block ,可以針對 label 跟 input 統一設定寬度,或是製作想要的樣式,會非常方便,在許多國外免費表單的樣式設計上都可以看到類似的做法。

textarea

textarea 是用來填寫段落文字,cols="30" 這是指寬,rows="5" 是高,而寬跟高都可以用 css 來設定。

按鈕

按鈕其實也是 input 來做

  • type="submit" 作用是送出,值是會顯示在按鈕上的文字 value="確認送出"
  • type="reset" 作用是清除表單上的文字, value="清除重填"

以上是最簡單的表單的小介紹,各位看倌明天見囉~

參考資料:
[1] https://www.w3.org/TR/html401/interact/forms.html#h-17.1
[2] https://www.w3.org/TR/html401/interact/forms.html#h17.3
[3] http://www.w3school.com.cn/tags/tag_label.asp


上一篇
Day17:小事之 HTML table responsive
下一篇
Day19:小事之 Google form 的運用
系列文
前端路上那些重要與不重要的小事30

尚未有邦友留言

立即登入留言