App下載

HTML如何編寫(xiě)一個(gè)簡(jiǎn)單的表單?

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

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

我們先來(lái)看下常用的表單元素有哪些:

 文本域  文本域通過(guò) ?<input type="text">? 標(biāo)簽來(lái)設(shè)定,當(dāng)用戶(hù)要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí),就會(huì)用到文本域。
 密碼字段  密碼字段通過(guò)標(biāo)簽 ?<input type="password">? 來(lái)定義
 單選按鈕  ?<input type="radio">? 標(biāo)簽定義了表單單選框選項(xiàng)。
 復(fù)選框  ?<input type="checkbox">? 定義了復(fù)選框. 用戶(hù)需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
 提交按鈕  當(dāng)用戶(hù)單擊確認(rèn)按鈕時(shí),表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。

具體效果:

簡(jiǎn)單表單

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>簡(jiǎn)單表單 - 編程獅(w3cschool.cn)</title>
</head>
<body>
<form action="">
用戶(hù)名:<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>
愛(ài)好:<input type="checkbox" name="like" value="運(yùn)動(dòng)">運(yùn)動(dòng)
      <input type="checkbox" name="like" value="畫(huà)畫(huà)">畫(huà)畫(huà)
      <input type="checkbox" name="like" value="閱讀">閱讀<br>
<input type="submit" name="確定登錄">
<input type="reset" name="重新填寫(xiě)">
</body>
</html>

以上就是 HTML 怎么編寫(xiě)簡(jiǎn)單的表單的全部?jī)?nèi)容。如果想讓自己開(kāi)發(fā)的頁(yè)面更加美觀(guān),可以加入標(biāo)簽樣式,背景圖等。此處就不在敘述,請(qǐng)同學(xué)們自行練習(xí)開(kāi)發(fā)。

1 人點(diǎn)贊

App下載
App下載

掃描二維碼

下載編程獅App

關(guān)注有禮
微信公眾號(hào)

掃碼關(guān)注 領(lǐng)資料包

意見(jiàn)反饋
幫助中心
返回頂部