在整個網站裡,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>
tag,action=""
是表單傳送過去的目的地,method
就是表單傳送的方法。
然後內部會是一個 label
搭配一個 input
的方式
上面例子裡會用 li 包 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 是用來填寫段落文字,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