HTML講解-網頁中的文本框

們在上網的時候，經常有一些登錄界面進行輸入賬號和密碼，以及我們在網上填一些信息，這些功能的實現都是通過表單來完成的，今天我們就來講講表單。

表單不是指一個標簽，而是指一類標簽。

我們表單里所有的內容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內容發送到想要發送的后臺，而method屬性有兩個值，分別是get和post。get和post的主要區別是get表單所傳的內容會在地址欄里顯示出來，并且有長度限制，而post表單所傳的內容不會在地址欄顯示出來，并且可以視為沒有長度限制。一般系統默認get。當然get和post的細區別還是有的，在這里我就不贅述了。

其中最重要的是<input>標簽，input標簽也是單標簽。input標簽的type屬性值不同，其產生的作用也不同：如：<input type="text">產生的是文本框，一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產生的是密碼框，一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產生的是提交框，一般是我們登錄的那個按鈕。這些標簽都有value屬性，但只有提交框用最合適用，因為文本框和密碼框雖然也會展示出來，但效果卻差強人意，我們一般都用placeholder屬性替代它。

不知大家有沒有在網上做過選擇題，作者是做過的。網頁中的選擇題也是用的input。

input的type屬性值還有radio，是單選框，有幾個選項就寫幾個input，但要注意每一個input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會知道這些是同一道題。

既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個屬性是checked=“checked”，這個可以設定默認選擇的選項。

我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況，其實input選擇框只有被點擊的時候才能選中，但有的時候太小不容易點擊甚至有的根本沒有顯示出來，這樣的話用戶體驗就會非常的差，所以我們引進了一個標簽：<label></label>標簽，這個標簽可以實現點擊文字就進行選擇的功能，用法就是將input標簽和文字寫在同一個label標簽中，注意每一個選項寫一起。

我們來看一下代碼和結果：

作者已經盡量去說清楚了，歡迎大家批評指教，希望多多關注[送心]

order 盒子邊框

復合屬性。設置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細
② 邊框樣式
③ 邊框顏色

語法：border: border-width | border-style | border-color ;

邊框四邊的粗細、樣式、顏色，以及上下左右每個位置的樣式屬性都是可以單獨調整的。

邊框的顏色不是必要的，如果不指定顏色，默認顏色為黑色，但必須為盒子指定寬高。

初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

邊框樣式

使用 border-style 可為盒子邊框設置樣式，以下示例為實線

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果：

可單獨針對某一方向設置邊框樣式

示例 CSS 代碼

上邊：border-top-style: double; （雙線）
右邊：border-right-style: solid; (實線)
下邊：border-bottom-style: dashed; (虛線)
左邊：border-left-style: dotted; (點線)

border-style 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0，本屬性將失去作用。

如果需要設置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實線，左右虛線。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：

border-style 樣式屬性值

屬性值解釋none無輪廓。 border-color將被忽略，border-width計算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓

邊框粗細

使用 border-width 可為盒子邊框設置粗細，以下示例邊框為 5px 粗細

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果

可單獨針對某一方向設置邊框粗細

示例 CSS 代碼

上邊：border-top-width: 10px; （雙線）
右邊：border-right-width: 10px; (實線)
下邊：border-bottom-width: 10px; (虛線)
左邊：border-left-width: 10px; (點線)

border-width 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-style設置為none或hidden，border-width的使用值將為0。

如果需要設置不同方向的邊框粗細，可以寫在一句 CSS 代碼里。

比如說下面這段代碼，上下2px，右2px，左5px。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果：

邊框顏色

可直接輸入
顏色的英文名稱
rgb值
十六進制

使用 border-color 可為盒子邊框設置顏色，以下示例邊框顏色為紅色。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果：

可單獨針對某一方向設置邊框顏色

示例 CSS 代碼

上邊：border-top-color: 10px;
右邊：border-right-color: 10px;
下邊：border-bottom-color: 10px;
左邊：border-left-color: 10px;

border-color 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0或border-style設置為none，本屬性將被忽略。

上面有兩個示例講述如何設置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。

border 是復合屬性

如果你需要同時設置盒子的粗細、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。

例如：

 /* CSS代碼 */
 div{
     border-top: 5px solid red;
 }

這段代碼指定了上邊框的三個屬性：粗細、樣式、顏色

border-top 包含了：

border-top-width: 5px;
border-top-style: solid;
border-top-color: red;

其他同理

教你用 CSS 畫個三角形

先來看一個示例

 /* CSS代碼 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

細心的你，一定發現了 border 的邊框四條邊交接處是斜角。

此刻我們把盒子的寬高設置為 0

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

是不是完完全全像四個三角形一樣。

我們只需要把上邊和左右兩邊的三角形隱藏起來，它不就是一個三角形了。

為 border-color 指定 transparent 值，使盒子邊框顏色變透明

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果：

把另外三條邊透明之后，就只剩一個三角形了。

完

部分資料引用自：

http://caibaojian.com/css3/properties/border/index.htm

人可能會疑惑，我為什么專門用一節內容來說邊框和圓角。其實，不為別的，只為它們在開發中，在Web系統中，在手機頁面中，太常用了。有邊框的頁面，讓人耳目一新，一目了然；有圓角的內容，讓人賞心悅目，心曠神怡。說的有點夸張了，就這么著吧。

邊框(border)一般為長方形形狀，有上下左右四條邊，CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

在CSS中，你可以通過border和其延伸的，如border-style，來實現邊框的效果。上邊框相關的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對應的單詞即可。

邊框樣式(border-style)常用的有dotted(點線)、dashed(虛線)、solid(實線)、double(雙邊框)這四種，不常用的有groove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。

/* --------在樣式表文件中---------- */
/*4條邊框一起設置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四條邊框可個性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*單條邊框設置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件內容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border統一設置四條邊框<br/>
    順序為：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設置，風格可不同<br/>
    順序為:上、右、下、左。<br/>
    1. 只有一個值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨一天邊框進行設置<br/>
    border-top：頂部寬度、樣式、顏色，一起設置<br/>
    border-top-width:上邊框寬度；<br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結果

11.2 圓角風格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統一指定4個圓角，順序為左上、右上、右下和左下。如果要特定指定某個角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內容

/*4個角統一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*單獨指定一個角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內容

<br/><br/>
<div class="four-radius">
    統一設置4個圓角<br/>
    一個值： 四個圓角值相同;<br/>
    兩個值: 左上角與右下角，右上角與左下角;<br/>
    三個值: 左上角, 右上角和左下角，右下角;<br/>
    四個值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    單獨指定某個角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

輸出結果

11.3 圓角邊框

不要重復造輪子，所以好多程序員一遇到問題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實現圓角邊框?答案毋庸置疑，答案是肯定的。

在樣式表ys2.css文件中的內容

/*圓角邊框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內容

<div class="corners">
    邊框屬性和圓角屬性，組合成圓角邊框
</div>

輸出結果

好了，有關CSS的圓角邊框內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

在線咨詢

上一篇：HTML框架分層設計
下一篇：遠程操作更簡單富士無線APP 4.0.0安卓版發布

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML講解-網頁中的文本框

初始 HTML

邊框樣式

可單獨針對某一方向設置邊框樣式

border-style 說明

border-style 樣式屬性值

邊框粗細

可單獨針對某一方向設置邊框粗細

border-width 說明

邊框顏色

可單獨針對某一方向設置邊框顏色

border-color 說明

border 是復合屬性

教你用 CSS 畫個三角形

11.1 邊框逼格

11.2 圓角風格

11.3 圓角邊框

您的項目需求