input標簽用法解讀

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,,沒什么可說的呢

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249936.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249936.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249936.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SpringBoot項目遇到的一些問題

SpringBoot項目整合JPA報錯轉載于:https://www.cnblogs.com/xb1223/p/10195054.html

關于SpringBoot中的多數據源集成

引言 其實對于分庫分表這塊的場景&#xff0c;目前市場上有很多成熟的開源中間件&#xff0c;eg&#xff1a;MyCAT&#xff0c;Cobar&#xff0c;sharding-JDBC等。 本文主要是介紹基于springboot的多數據源切換&#xff0c;輕量級的一種集成方案&#xff0c;對于小型的應用可…

實現vue2.0響應式的基本思路

注意&#xff0c;這里只是實現思路的還原&#xff0c;對于里面各種細節的實現&#xff0c;比如說數組里面數據的操作的監聽&#xff0c;以及對象嵌套這些細節本實例都不會涉及到&#xff0c;如果想了解更加細節的實現&#xff0c;可以通過閱讀源碼 observer文件夾以及instance文…

HTML標簽類型及特點

一、 概述 HTML&#xff08;Hyper Text Markup Language &#xff09;作為一種標記語言&#xff0c;網頁所有的內容均書寫在標簽內部&#xff0c;標簽是組成Html頁面的基本元素&#xff0c;因此對標簽特性的理解在HTML的學習過程中比較重要。 二、基本分類 HTML中的標簽從閉…

打開頁面

*<a href"javascript:void(0)" title"google" οnclick"window.parent.addTab(, 測試, Admin/UserRole, 100000)">測試444</a>*轉載于:https://www.cnblogs.com/niyl/p/10196528.html

python 大量使用json 存儲數據時,格式化輸出的方式

import json, pprintdic {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好這是鍵: 檐下聽雨}print(dic)pprint.pprint(dic)print(json.dumps(dic))print(json.dumps(dic, indent2))# {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好這是鍵…

vue computed 源碼分析

我們來看看computed的實現。最簡單的一個demo如下&#xff1a; <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> </head> <body> <div id"app"><div name"test&…

軟件開發文檔整理(之)一張示意圖 | 清晰明了

在整個軟件開發周期&#xff0c;開發文檔是必不可少的資料&#xff0c;它們貫穿于整個開發周期&#xff0c;用來評估計劃、規劃進度、項目管理、軟件測試、軟件發布&#xff0c;可以說至關重要。 ??開發文檔必須歸檔&#xff0c;沒有歸檔的文檔作用大打折扣&#xff0c;時效性…

java大數BinInteger

當我們遇到long不行的時候就要考慮這個BinInteger了&#xff0c;因為這是只要你內存夠大&#xff0c;就能輸入很大的數&#xff0c;用這個處理高精度問題&#xff0c;是很容易的一件事&#xff0c;對于我這剛學java的萌新來說&#xff0c;長見識了&#xff0c;確實比C方便 BigI…

HTML頁面提交TABLE

在HTML頁面里&#xff0c;提交一個TABLE需要把TABLE的值傳入變量或json格式&#xff0c;然后submit到服務端的。 思路描述&#xff1a;將table里的值取出&#xff0c;放在json中&#xff0c;賦給一個input&#xff0c;通過一個input來實現table表數據提交到服務器&#xff0c;就…

生成條形碼

https://packagist.org/packages/picqer/php-barcode-generator轉載于:https://www.cnblogs.com/pansidong/p/9334224.html

3.GDScript(1)概覽

GDScript 是上面提到的用于Godot的主要語言。和其他語言相比&#xff0c;它與Godot高度整合&#xff0c;有許多優點&#xff1a; 簡單&#xff0c;優雅&#xff0c;設計上為Lua、Python、Squirrel等語言用戶所熟悉。加載和編譯速度飛快。編輯器集成非常令人愉快&#xff0c;有節…

Web 前端框架分類解讀

Web前端框架可以分為兩類&#xff1a; JS的類庫框架 JQuery.JS Angular.JS&#xff08;模型&#xff0c; scope作用域&#xff0c;controller&#xff0c;依賴注入&#xff0c;MVVM&#xff09;&#xff1a;前端MVC Vue.JS&#xff08;MVVM&#xff09;***** Reat.JS &…

async / await對異步的處理

雖然co是社區里面的優秀異步解決方案&#xff0c;但是并不是語言標準&#xff0c;只是一個過渡方案。ES7語言層面提供async / await去解決語言層面的難題。目前async / await 在 IE edge中已經可以直接使用了&#xff0c;但是chrome和Node.js還沒有支持。幸運的是&#xff0c;b…

《SQL Server 2008從入門到精通》--20180717

目錄 1.觸發器1.1.DDL觸發器1.2.DML觸發器1.3.創建觸發器1.3.1.創建DML觸發器1.3.2.創建DDL觸發器1.3.3.嵌套觸發器1.3.4.遞歸觸發器1.4.管理觸發器1.觸發器 觸發器是一種特殊的存儲過程&#xff0c;與表緊密關聯。 1.1.DDL觸發器 當服務器或數據庫中發生數據定義語言&#xff…

主成分分析原理解釋(能力工場小馬哥)

主成分分析&#xff08;Principal components analysis&#xff09;-最大方差解釋 在這一篇之前的內容是《Factor Analysis》&#xff0c;由于非常理論&#xff0c;打算學完整個課程后再寫。在寫這篇之前&#xff0c;我閱讀了PCA、SVD和LDA。這幾個模型相近&#xff0c;卻都有自…

div/div作用

<div></div>主要是用來設置涵蓋一個區塊為主&#xff0c;所謂的區塊是包含一行以上的數據&#xff0c;所以在<div></div>的開始之前與結束后&#xff0c;瀏覽都會自動換行&#xff0c;所以夾在<div></div>間的數據&#xff0c;自然會與其前…

路由懶加載優化

首先得需要插件支持&#xff1a;syntax-dynamic-import import Vue from vue import VueRouter from vue-router /*import First from /components/First import Second from /components/Second*/Vue.use(VueRouter) //方案1 const first ()>import(/* webpackChunkName: &…

vue全面介紹--全家桶、項目實例

簡介 “簡單卻不失優雅&#xff0c;小巧而不乏大匠”。 2016年最火的前端框架當屬Vue.js了&#xff0c;很多使用過vue的程序員這樣評價它&#xff0c;“vue.js兼具angular.js和react.js的優點&#xff0c;并剔除了它們的缺點”。授予了這么高的評價的vue.js&#xff0c;也是開…

關于Keychain

1、Keychain 淺析 2、iOS的密碼管理系統 Keychain的介紹和使用 3.iOS開發中&#xff0c;唯一標識的解決方案之keyChainUUID 轉載于:https://www.cnblogs.com/KiVen2015/p/9341224.html