資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用HTML5定義使用者輸入表單？
HTML5 為我們提供了強大的工具來建立動態和互動式的網頁。網頁的一個重要組成部分是收集使用者輸入的能力。在本文中，我們將學習如何使用 HTML5 以簡單而獨特的方式定義使用者輸入表單。
基本表單元素結構
表單使用<form>標籤定義。<form>標籤建立一個用於輸入欄位的容器，例如文字框、單選按鈕和複選框。
語法
基本的表單結構如下所示：
<form> <!-- form fields start from here --> </form>
action 屬性指定將處理提交的表單資料的指令碼的 URL。method 屬性指定將用於提交表單資料的 HTTP 方法。
<form action="http:" method="POST/GET"> <!-- form fields start from here --> </form>
表單輸入欄位
在 HTML5 中，表單中可以使用各種型別的輸入欄位。每個輸入欄位都使用特定型別的屬性定義，該屬性確定資料型別。在這裡，我們將看到一些最常見的輸入型別：
文字輸入欄位
密碼輸入欄位
複選框輸入欄位
單選按鈕輸入欄位
下拉選擇欄位
多行文字輸入欄位
文字輸入欄位
它允許我們向表單中輸入文字。它使用帶有型別屬性“text”的<input>元素定義。
密碼輸入欄位
它允許我們以安全的方式輸入密碼。它使用帶有型別屬性“password”的<input>元素定義。
複選框輸入欄位
它允許我們從一組選項中選擇一個或多個選項。它使用帶有型別屬性“checkbox”的<input>元素定義。
單選按鈕輸入欄位
單選按鈕輸入欄位允許我們從一組選項中選擇一個選項。它使用帶有型別屬性“radio”的<input>元素定義。
下拉選擇欄位
下拉選擇欄位允許我們從選項列表中選擇一個選項。它使用<select>元素定義，其中嵌套了一個或多個<option>元素。
多行文字輸入欄位
多行文字輸入欄位允許我們向表單中輸入多行文字。它使用<textarea>元素定義。
提交按鈕
提交按鈕允許我們將表單資料提交到伺服器。它使用帶有型別屬性“submit”的<button>元素定義。
示例
這是一個使用 HTML5 建立使用者輸入表單的示例
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center;}
</style>
</head>
<body>
<h3>Define a form for user input using HTML5</h3>
<form action="#" method="get">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="option1">Option 1:</label>
<input type="checkbox" id="option1" name="option1" value="option1">
<label for="option2">Option 2:</label>
<input type="checkbox" id="option2" name="option2" value="option2"><br><br>
<label for="option1">Option 1:</label>
<input type="radio" id="option1" name="options" value="option1">
<label for="option2">Option 2:</label>
<input type="radio" id="option2" name="options" value="option2"><br><br>
<label for="country">Select a country:</label>
<select id="country" name="country">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select><br><br>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea><br><br>
<label for="submit">Submit Form:</label>
<input type="submit" value="submit" />
</form>
</body>
</html>
結論
使用 HTML5 建立使用者輸入表單是一個簡單的過程。首先建立一個表單元素，新增輸入欄位，使用表單控制元件來增強使用者體驗，並新增提交按鈕。透過這些基本步驟，我們可以建立滿足網站特定需求的表單。
瀏覽量：219
