HTML表單和PHP環境的搭建—表單的建立
阿新 • • 發佈:2019-02-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> </head> <body> <form> 賬戶: <input type="text"> <br/> 密碼: <input type="text"> <br/> 你喜歡的水果有哪些? <br/> 蘋果<input type="checkbox"> 西紅柿<input type="checkbox"> 香蕉<input type="checkbox"> <br/> 請選擇你的性別: 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br/> 選擇你最常用的網站名稱: <select> <option >www.baidu.com</option> <option >www.google.com</option> <option >www.aini.com</option> </select> <input type="button" value="按鈕"> <input type="button" value="提交"> </form> <textarea cols="30" rows="30">請在此填寫資訊:</textarea> </body> </html>
以上有一些簡單的表單搭建。下面我們講解一下以上出現的標籤及其屬性:
1. <form> 標籤
定義和用法
<form> 標籤標籤用於建立供使用者輸入的 HTML 表單。
form 元素包含一個或多個表單元素,比如:
- button 按鈕
- input 輸入
- keygen 註冊
- object 專案
- output 輸出
- select 選擇
- textarea 文字域
2.<input> 標籤
定義和用法
<input> 標籤用於蒐集使用者資訊。
根據不同的 type 屬性值,輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。
比如 :
1.text :文字欄位
2.checkbox:複選框(能夠進行多選)
3.password:掩碼後的文字控制元件(密碼)
4.radio:單選按鈕 對於單選按鈕 必須歸為一類才能實現單選 如上面的 男和女歸為性別一類
5.button :按鈕,可以用於提交按鈕或者是確定按鈕
3.<select> 標籤
定義和用法
select 元素可建立單選或多選選單。
<select&> 元素中的 <option> 標籤用於定義列表中的可用選項。
提示和註釋:
提示:select 元素是一種表單控制元件,可用於在表單中接受使用者輸入。
上面的程式碼是演示如何在HTML頁面中建立簡單的下拉列表框。下拉列表框是一個可選列表。另外還可以寫成
<select name="webs">
<option value="www.baidu.com">www.baidu.com</option>
<option value="www.google.com" selected="selected">www.google.com</option>
<option value="www.aini.com">www.aini.com</option>
<option value="www.hello.com">www.hello.com</option>
</select>
這就成了有預選值得下拉列表框
4.<textarea> 標籤
定義和用法
定義一個文字區域 (text-area) (一個多行的文字輸入區域)。使用者可在此文字區域中寫文字。在一個文字區中,您可輸入無限數量的文字。文字區中的預設字型是等寬字型 (fixed pitch)。
文字域是可以設定寬度和深度 並且是可以下拉的