HTML5/HTML中標簽用法解讀
OK!今天博主為小伙伴們介紹的內容是HTML5/HTML中標簽的用法,,, ,emmm圖文并茂哦!
下面正式開始內容的介紹:首先,直觀上說標簽規定了用戶可以在其中輸入數據的輸入字段!元素在元素之中使用的時候,用來聲明允許用戶輸入數據的input控件:輸入字段可以通過多種方式改變,取決于type的值。
首先是HTML5之前的HTML中input標簽:這個時候type的屬性一般有以下幾個:
text button submit password checkbox radio file reset
下面來詳細解說:
(1)text:先來看下運行效果;
test這個屬性沒什么好說的,,就是圈一個文本框,我們可以在其中輸入文本;
(2)button:就像他的名字一樣,是一個按鈕!我們可以為他賦予value值;
運行效果還有代碼如上!按鈕用的超級多啊,一般與一些動作函數一起使用!比如onclick onmouseover onmouseout等,這里不說這個,,感興趣的小伙伴可以自行了解!
(3)submit:submit與button有點像,,不同的就是submit天生就可以點擊,可跳轉到另外一個頁面,而button則需要onclick這個方法來激活!比如,我們時常會遇到醬紫的情況,,網申一份簡歷的時候,在最后往往都有一個提交的按鈕!下面我們使用submit來實現跳轉到百度首頁!
這里呢,我們點擊一下提交,,,幾秒后就可以跳轉到百度首頁了!實現代碼如下:
<form action="http://baidu.com"><input type="text" ><input type="submit" value="提交"></form>
(4)password:輸入密碼,,這個太常見了;
我們來做下輸入密碼之后提交到百度首頁:
點提交之后,,就到了百度首頁哈
代碼:
<form action="http://baidu.com"><input type="password" ><input type="submit" value="提交"></form>
(5)checkbox:單選框復選框用的比較多,我們也來寫下:
<input type="checkbox" >
(6)radio:
<input type="radio" >
(7)file:這個點擊之后會從本地上傳一文件,,我們在熟悉不過了,傳百度云的時候啊什么的!
<input type="file" >
(8)reset:這個就是重置按鈕!
HTML中input到這里就結束了!下面是強大的HTML5!
與HTML比較HTML新增了其type類型:比如:
新增-date日期!number!在PC端帶上下箭頭,在移動端是數字鍵盤!min=“0” max=“40” step=“2”
range:其他與number類似的;min max step ;search;url;tel;
(1)先來看下date:會顯示出一個日歷!
右側鼠標放上出來小箭頭點擊出來日歷!
(2):number:
點黑色小箭頭可改變數字可大可小,代碼:
<input type="number"min="0" max="40" step="2">
分別定義了上下限,,step字如其名,定義了每次變化的數量!
(3)range:是一個滑塊也很常見:
除了type不同,其他與number一樣!
代碼:
<input type="range"min="0" max="40" step="2”">
(4)search:
類似于搜索的時候,寫錯了,x掉內容的操作!剩下的URL TEL 就是一個文本框,,字如其名,,輸入URL/TEL,,沒什么可說的呢