2015年4月9日 星期四

[筆記] 將HTML中的INPUT標籤套用CSS樣式


在最新的HTML5中,增加了很多不同的input標籤,讓我們來看看如何透過css來修改美化的樣式。

學到的語法包含
HTML
<input type=" ">:用來建立表單內的內容。
<input type="text" placeholder="輸入文字" >:placeholder,可搭配text使用,裡面可以出現預設字詞提示網友,網友一旦輸入內容,提示字詞即不見。

CSS
 input[type="   "]{輸入css style ...}:修改input標籤裡的css樣式。

參考網站:
CSS Button Generator
CSS CheckBox


HTML INPUT 標籤

W3School裡面,羅列了一大串可用的HTML INPUT標籤,有興趣的可以點進去看




最常用的大概就是submit了,這是用來製作「按鈕」的,只需要在html當中輸入
 <input type="submit"> 
就會有相對應的按鈕產生了


若想要修改裡面文字的預設值,只需要在後面加上value=就可以了,像是我把它改成「確認」,只需要輸入

 <input type="submit" value="確認">


按鍵就會變成


另外很常用的是text這個指令,也就是建立一個文字框
<input type="text">


就會出現如下的文字框


但就這樣一個框框,網友根本常常搞不清楚狀況,所以我們可以使用placeholder這樣的語法,來增加說明文字,例如我把語法改成:
<input type="text" placeholder="輸入文字" >

這時候,我們的文字框當中就會增加預設的文字,網友一旦點選,這些預設文字就會不見


和剛剛類似,我們也可以在inupt後面放value,但這麼做的話,等於是預先幫網友填好內容,而不是像上面一樣是說明文字。

為input套上css樣式


在預設的input標籤中,大部分的按鍵或文字框都比較單調,但我們一樣可以透過css樣式來裝飾這些標籤。

我們可以使用最常用的方法,直接針對html裡面的標籤去做裝飾,像是這裡我直接針對input去修改它的樣式
<style>
    input {padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
</style>

上面這裡,cursor是用來改變滑鼠游標的,這裡設定讓滑鼠移過去的時候,會變成可按的手指游標;border-radius則是用來讓外框變成圓弧狀的語法

這麼做的話,所有的input標籤都會更改樣式,所以我們剛剛的文字框和按鈕會變成這樣


確認的按鈕的確變得可愛多了,但是我不想要連文字框也一起變阿!可以怎麼做呢?

因為在剛剛的地方,我們是選擇所有的input標籤去改變樣式,所以自然連文字框也會改變,如果我想要只改變按鈕的地方,我們需要在input後面加上[type="submit"],就像這樣:
 input[type="submit"]{padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
這樣的意思,就是只針對input裡面的subit按鍵去做修改,呈現的結果就會像這樣:


是不是好看多了呢?

如果你覺得文字框的樣式太不顯眼,你也可以用同樣的方式加以修改,像是這樣:
input[type="text"]{padding:5px 15px; border:2px black solid;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }

結果就會變成這樣


是不是清楚多了呢?

這裡還有一些製作按鈕或方框時可以參考的網站:
CSS Button Generator
CSS CheckBox

本次用到的程式碼共包含
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    
<style>
    input[type="submit"]{padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
    
    input[type="text"]{padding:5px 15px; border:2px black solid;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
    
.demo{
    padding-top: 50px;
    text-align: center
}
</style>

</head>
<body>
<div class="demo">
    <input type="text" placeholder="輸入文字" >
    <input type="submit" value="確認">
</div>


</body>
</html>




Share:

0 意見:

張貼留言