1. 程式人生 > >HTML表單和PHP環境的搭建—表單的建立

HTML表單和PHP環境的搭建—表單的建立

<!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)。

文字域是可以設定寬度和深度  並且是可以下拉的