1. 程式人生 > >HTML中表單的用法

HTML中表單的用法

長度限制 reset 課堂 用戶信息 alt 傳輸 tex eset charset

在WEB課堂中我學習到了如何創建表單,並且認識了很多的new words讓我了解更多關於HTML和CSS的知識,下面是我的源碼:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WUZ-愛上音樂屋子</title>
</head>
<body background="IMG_2970.jpg"><!--插入背景圖片-->
<center><br><br><br><br><br><br><br><br><br><br><!--使用center標簽使表單在頁面中居中對齊-->


<h1><font color="green">-登錄我的WUZ-</h1><br><br>
<hr size="2px" width="30%" color="green"><!--插入水平線使表單內容更加被強調-->
<h3>請輸入您的用戶信息</font></h3>
<form action="" method="get" class="form-example"><!--開始創建表單-->

<div class="form-example">
<label for="name"><font color="LightGrey">輸入用戶名: </label>
<input type="text" name="name" id="name" maxlength="12"required><!--設置最長輸入長度限制用戶名字符長度,下面密碼相同-->
<font color="green">用戶名不多於12個字符!</font>

</div><br>
<div class="form-example">
<label for="password">輸入密碼: </label>
<input type="password" name="password" id="password" maxlength="15" required><!--這裏輸入類型改為password使用戶不可見密碼-->
<font color="green">密碼不多於15個字符!</font>
</div><br>
<div class="form-example">
<input type="submit" value="登錄!"> <input type="reset" value="重新輸入!"/><br><!--設置“登錄”按鈕將數據傳輸給服務器,設置“重新輸入”按鈕清除已輸入的表單信息-->
</div>
</form>
<hr size="2px" width="30%" color="green"><br><br>
</font>
</center>
</body>
</html>


這是完成後在遊覽器中打開的效果:

技術分享圖片

HTML中表單的用法