html form用法實例源碼及線上效果

在html網頁開發中,表單(Form)是經常用到的,用於接收用戶提交的數據。
今天要介紹的就是表單標籤form用法,接下來我們就一起來看看它的用法吧!

「form」作為英文單詞有「表單」的意思,那它在html中作為標籤又充當什麼樣的角色呢

一、標籤定義及用法

在html中,標籤是用來創建用戶輸入內容的html表單,在網頁中很常見,比如:註冊和登入頁面就是用表單實現的。

標籤中通常會有很多子元素,用來定義各種交互控件(Input文本字段、Checkbox復選框、Radio單選框、Submit提交按鈕等等),比如< input>、< button>、< select>、< textarea>等標籤。

二、標籤格式 表單內容

說明:表單內容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等html標籤

三、Form標籤屬性


action:重要,當提交表單時向何處發送表單數據;
method:重要,用於發送表單數據的HTTP方法,值可以是:get、post;
autocomplete:是否啓用表單的自動完成功能,值可以是:on、off,html5新增;
enctype:在向服務器發送表單數據之前如何對其進行編碼,method=”post”時可以使用,值可以是:multipart/form-data、text/plain等;
name:規定表單的名稱,在xhtml中也廢棄,使用id來代替;
novalidate:提交表單時不進行驗證,值為:novalidate,html5新增;
target:在何處打開action屬性中的地址,值可以是:_blank、_self、_parent、_top;

四、實例

html form頁面代碼

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
    <title>html中form用法的詳細介紹</title>
</head>

<body bgcolor="bisque">
    <form action="/wp-content/demos/htmlform1/a.php" method="get">
        用戶名:<br><input type="text" name="userName"><br>
        密碼:<br><input type="text" name="password"><br>
        <br><input type="submit" value="登入">
    </form>
</body>

</html>

接收 html form 數據的php代碼

<?PHP

echo "已經收到,內容如下:";
echo $_GET["userName"]."<br>";
echo $_GET["password"]."<br>";
echo "<a href='/wp-content/demos/htmlform1/index.html'>返回form頁</a>";

在線觀看html form效果

以上就是 html form的用法。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *