資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML 表單設計
當您想從網站訪問者那裡收集一些資料時，需要使用 HTML 表單。例如，在使用者註冊期間，您可能希望收集姓名、電子郵件地址、信用卡等資訊。
表單將接收網站訪問者的輸入，然後將其釋出到後端應用程式，例如 CGI、ASP 指令碼或 PHP 指令碼等。後端應用程式將根據應用程式中定義的業務邏輯對傳遞的資料執行必要的處理。
在 HTML 中使用 <form> 標籤建立表單，並在其中包含各種表單元素，如 input、textarea 等。
<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>
要建立表單，您需要新增文字、密碼、生日欄位、電話、電子郵件、按鈕等欄位。所有這些都可以使用 <input> 元素新增。
| 序號 | 型別和描述 |
|---|---|
| 1 | text 一個自由格式的文字欄位，通常沒有換行符。 |
| 2 | password 一個用於敏感資訊的自由格式文字欄位，通常沒有換行符。 |
| 3 | checkbox 從預定義列表中選擇零個或多個值。 |
| 4 | radio 一個列舉值。 |
| 5 | submit 一個自由格式的按鈕，用於啟動表單提交。 |
| 6 | file 一個任意檔案，帶有 MIME 型別和可選的檔名。 |
| 7 | image 相對於特定影像大小的座標，還有一個額外的語義，即它必須是最後選擇的值，並啟動表單提交。 |
| 8 | hidden 一個任意字串，通常不顯示給使用者。 |
| 9 | select 一個列舉值，很像 radio 型別。 |
| 10 | textarea 一個自由格式的文字欄位，通常沒有換行符限制。 |
| 11 | button 一個自由格式的按鈕，可以啟動與按鈕相關的任何事件。 |
然而，HTML5 為 <input> 元素引入了更多選項：
| 序號 | 型別和描述 |
|---|---|
| 1 | datetime 根據 ISO 8601 編碼的日期和時間（年、月、日、小時、分鐘、秒、秒的小數），時區設定為 UTC。 |
| 2 | datetime-local 根據 ISO 8601 編碼的日期和時間（年、月、日、小時、分鐘、秒、秒的小數），沒有時區資訊。 |
| 3 | date 根據 ISO 8601 編碼的日期（年、月、日）。 |
| 4 | month 根據 ISO 8601 編碼的由年份和月份組成的日期。 |
| 5 | week 根據 ISO 8601 編碼的由年份和週數組成的日期。 |
| 6 | time 根據 ISO 8601 編碼的時間（小時、分鐘、秒、秒的小數）。 |
| 7 | number 僅接受數值。step 屬性指定精度，預設為 1。 |
| 8 | range range 型別用於輸入欄位，這些欄位應包含來自數字範圍的值。 |
| 9 | email 僅接受電子郵件值。此型別用於應包含電子郵件地址的輸入欄位。如果您嘗試提交簡單的文字，它會強制您僅以 email@example.com 的格式輸入電子郵件地址。 |
| 10 | url 僅接受 URL 值。此型別用於應包含 URL 地址的輸入欄位。如果您嘗試提交簡單的文字，它會強制您僅以 http://www.example.com 或 http://example.com 的格式輸入 URL 地址。 |
示例
讓我們現在來看一個建立表單的例子：
<!DOCTYPE html> <html> <body> <h2>Register</h2> <form action="" method="get"> Id: <input type="text" name="id" placeholder="Enter UserId here..."><br> Password: <input type="password" name="pwd" placeholder="Enter password here..."><br> DOB: <input type="date" name="dob"><br> Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br> Email: <input type="email" name="email" placeholder="Enter email here..."><br><br> <button type="submit" value="Submit">Submit</button> </form> /body> </html>
輸出
這將產生以下輸出：
示例
現在，我們將看到另一個例子，在這個例子中，我們正在建立一個表單，其中一個欄位是一個複選框。
<!DOCTYPE html> <html> <body> <h2>Register</h2> <form action="" method="get"> Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br> Password: <input type="password" name="pwd" placeholder="Enter password here..."><br> DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br> Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br> Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br> <input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br> <button type="submit" value="Submit">Submit</button> </form> </body> </html>
這將產生以下輸出：
更新於：2019年9月17日
5K+ 次瀏覽
廣告