html表單邊框如何加顏色

發(fā)布時(shí)間：2020-09-26 14:56:27 來(lái)源：億速云閱讀：165 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了html表單邊框如何加顏色，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

首先我們說(shuō)的是表單的邊框怎么添加顏色？

<input>標(biāo)簽用于搜集用戶信息。根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

提示：在 HTML 中，<input> 標(biāo)簽沒(méi)有結(jié)束標(biāo)簽；在 XHTML 中，<input> 標(biāo)簽必須被正確地關(guān)閉。

提示：請(qǐng)使用 label 元素為某個(gè)表單控件定義標(biāo)簽。

先來(lái)看一個(gè)HTML表單邊框的使用實(shí)例：

<form action="form_action.asp" method="get">
  請(qǐng)輸用戶名: <input type="text" name="fname" /></br>
  重復(fù)用戶名: <input type="text" name="lname" /></br>
  <input type="submit" value="提交" />
</form>

這個(gè)在瀏覽器中顯示的效果為：

html表單邊框如何加顏色

這個(gè)效果相信我們?cè)诤芏鄷r(shí)候都見(jiàn)過(guò)，也用過(guò)不少次。

這是還沒(méi)加入邊框的，現(xiàn)在說(shuō)說(shuō)怎么加邊框：

我們這篇文章用的是css樣式來(lái)設(shè)置邊框線，比如添加這樣樣式：

<style>
form{
    border: 3px solid red;
}
</style>

里面的效果就出來(lái)，我們一起把全部的代碼都敲出來(lái)吧：

<html>
<head>
<style>
form{
    border: 3px solid red;
}
</style>
</head>
<form action="form_action.asp" method="get">
  請(qǐng)輸用戶名: <input type="text" name="fname" /></br>
  重復(fù)用戶名: <input type="text" name="lname" /></br>
  <input type="submit" value="提交" />
</form>
</html>

現(xiàn)在來(lái)看看效果，有沒(méi)有3像素的邊框：

html表單邊框如何加顏色

如圖，添加了三個(gè)像素的紅色邊框把表單都包裹起來(lái)了，這個(gè)代碼是不是也很簡(jiǎn)單，這個(gè)我們就要可以用來(lái)調(diào)整邊框線的顏色啊，和像素調(diào)整都可以。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html表單邊框如何加顏色內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

html表單邊框如何加顏色

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽