App下載

HTML如何編寫一個簡單的表單?

猿友 2021-03-17 11:59:49 瀏覽數(shù) (6589)
反饋

表單頁面的編寫是前端開發(fā)中一個重要的環(huán)節(jié),在注冊登錄和填寫資料信息時都會涉及到。那么 W3Cschool 小編為大家介紹下簡單的表單編寫。

我們先來看下常用的表單元素有哪些:

 文本域  文本域通過 ?<input type="text">? 標簽來設定,當用戶要在表單中鍵入字母、數(shù)字等內容時,就會用到文本域。
 密碼字段  密碼字段通過標簽 ?<input type="password">? 來定義
 單選按鈕  ?<input type="radio">? 標簽定義了表單單選框選項。
 復選框  ?<input type="checkbox">? 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
 提交按鈕  當用戶單擊確認按鈕時,表單的內容會被傳送到另一個文件。

具體效果:

簡單表單

這是最基礎的表單效果,包括了以上提及的五種表單元素。讓我們來看下具體的代碼:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>簡單表單 - 編程獅(w3cschool.cn)</title>
</head>
<body>
<form action="">
用戶名:<input type="text" name="username"><br>
密碼:<input type="password" name="password"><br>
性別:<input type="radio" name="sex" value="女">女
      <input type="radio" name="sex" value="男">男<br>
愛好:<input type="checkbox" name="like" value="運動">運動
      <input type="checkbox" name="like" value="畫畫">畫畫
      <input type="checkbox" name="like" value="閱讀">閱讀<br>
<input type="submit" name="確定登錄">
<input type="reset" name="重新填寫">
</body>
</html>

以上就是 HTML 怎么編寫簡單的表單的全部內容。如果想讓自己開發(fā)的頁面更加美觀,可以加入標簽樣式,背景圖等。此處就不在敘述,請同學們自行練習開發(fā)。

1 人點贊