1. 程式人生 > >input常見屬性和使用方法的介紹

input常見屬性和使用方法的介紹

寫在前面:老套路有栗子有code,這篇文章是對css中input標籤的屬性介紹以及比較常用常見的使用方法的一個總結。我自己也老是記不住,所以經常百度一下,加深一下印象和為了自己以後查詢資料方便,也方便後來的人。

去掉input的邊框
栗子:


就是這個東東,原始的樣式比較難看,一般都有去掉的需求。
 border: none;

已經成功去掉了

去掉滑鼠點選時出現的方框,就是上一張圖片的藍色東西。

1.outline:none;//這裡有三種方式,都可以實現。
2.outline:0;
3.outline:medium;

input幫助使用者填寫輸入欄位的提示
替使用者輸入value


直接插入到html裡面

placeholder="請輸入手機號"
placeholder="請輸入密碼"//像上面的演示圖片一樣,不過點選一下這些字都不見了,起到提示的作用
value="132123123"//這些數字會直接輸入到input標籤裡面,需要使用者手動刪除,才會消失

修改input 的預設寬度


這裡只需要填數字,不需要這麼寬
input[type=text]{//或者直接在input的class上寫
    width:5.8%;
}

重新整理時提前選中選項


Paste_Image.png

在html的input標籤內插入(checked="checked")

傳送資料到某個地址

資料傳輸的方式選擇
method="post/get"
name
定義input的name名字作用和id類似,name可以和form關聯起來,起到傳輸資料之類的作用。


Paste_Image.png

平常修改的比較多的就大概這些,還有一些設定,我補充一下:

height:定義 input 欄位的高度。(適用於 type="image";
max:規定輸入欄位的最小值。與 "max" 屬性配合使用,來建立合法值的範圍。;

input的type屬性


好累啊,好想睡覺

有些我可能沒說到的(或者不熟悉),可以自行百度一下,我平常用的比較多的大概就這些。
大部分主要還是從w3c中關於input標籤的說明中演變出來的:

http://www.w3school.com.cn/tags/tag_input.asp

後話:剛開始沒想寫這麼多,後來就想都解釋一下吧,然後就花了一個多小時好累啊。本來今天是想寫個用indexOf()和push()獲取不重複隨機數的方法,然後我那個程式碼還有點問題,準備等完善了,再分享出來給大夥兒看看。

最後又到了觀眾朋友們最喜歡的求贊求關注環節:希望看完的朋友點個喜歡,想關注我這個菜雞是如何成長的也可以關注一下我,基本上每個月都不會少於十五篇文章(看到乾貨我也會進行分享)。然後github也互相加個star。碼字不易,感謝支援,感激不盡!
ps:如果希望我寫哪方面的文章可以在底下評論,或者是私信我,雖然寫的不好,但我就當這是記錄自己成長的一種方式咯。(前提是我會了,如果不會我也會記下來,等會了的時候再更出來。)
簡書主頁連結