HTML中input可以創建的輸入類型有哪幾種

很多新手在使用html的input創建輸入類型的時候都應該會糾結自己明明寫得好好的input代碼就是不能實現呢?我覺得應該是你不太清楚input中幾種輸入類型的用法吧!

方法/步驟

首先,我們要清楚input可以創建哪些輸入類型呢?

第一種,姓名類文本的創建。這種類型比較好記住,只要記住輸入的類型是text文本類型就能寫對!完整的演示代碼可以參考下圖。

<form>

名: <input type="text" name="firstname"> <br />

姓: <input type="text" name="lastname">

</form>

第二種,密碼類文本的創建。這種也很好記住,就是password的使用。不過需要注意的是密碼在輸入的時候,瀏覽器將使用項目符號來代替這些字符。這也就是我們平時看到的黑點。完整的代碼可以參考下圖的。

<form>

用戶: <input type="text" name="user"> <br />

密碼: <input type="password" name="password">

</form>

第三種,複選框的創建。這種是checkbox的使用。我們在選擇的時候各個選項不會相互的干預,即選擇了第一項,同時還可以選擇其他幾項。我們拿自行車和汽車舉例。大家可以試試這個效果。

<form>

我喜歡自行車:<input type="checkbox" name="Bike"> <br />

我喜歡汽車:

<input type="checkbox" name="Car">

</form>

第四種,單選框的創建。這個適用於只有唯一性的選項。單選大家應該明白當用戶點擊一個單選按鈕時,該按鈕會變為選中狀態,其他所有按鈕會變為非選中狀態。性別選擇就是比較好記的例子。單選的單詞是radio要記住哦!

第五種,按鈕的創建。按鈕也是輸入的一種類型哦!button就是按鈕的意思!

<input type="button" value="Hello world!">

我們可以對value裡面的值根據自己的需要來定義。

第六種,以上幾種方式的組合應用。組合代碼裡面新增了<form name="input" action="/html/html_form_action.asp" method="get"> 這條,我相信大家應該能明白吧!

注意事項

這些input類型都是創建在form裡面的哦!

相關文章

  1. Unity NGUI input 長度與輸入類型設置

    Unity NGUI input 輸入長度與輸入類型設置,可限制輸入的長度和輸入的類型 工具/原料 Unity NGUI 方法/步驟 UIInput 腳本預覽,找到characterLimit屬性,設 ...
  2. Bartender中創建數據輸入表單的桌面快捷方式

    在Bartender條碼列印軟體中,為了更加簡化操作,實現快速列印的目的,BarTender可以通過桌面快捷方式直接運行設計的數據輸入表單來進行列印,而無需打開Bartender軟體來進行列印.Bar ...
  3. Word中如何手動創建符合我們需求的符號類型

    在Word中包含很多項目符號類別,但是都是默認的數字或符號格式的,如果我們想根據自己的工作需要,比如寫標書,寫格式複雜的文檔,默認的符號類型可能就沒有辦法滿足我們的需要了,這時候就需要我們自己手動的來 ...
  4. PPT中如何創建文本/輸入文字

    PPT中如何創建文本/輸入文字 工具/原料 PPT 方法/步驟 在剛創建的文檔中,會給你兩個現成的文本格式,在這裡可以直接輸入文字 如果在頁面中沒有文本輸入的地方,如圖,這樣該如何創建文本輸入文本呢 ...
  5. Dreamweaver5 中如何使用創建好的css??

    下邊給出在Dreamweaver5中使用創建好的css的方法,希望對大家有所幫助呵呵!! 工具/原料 Dreamweaver5 方法/步驟 方法一 1)選擇定你要設置的文本對象 2)在打開的文檔中選擇 ...
  6. excel中,如何創建簇狀條形圖(1)

    創建圖標是一件比較簡單的事情.下面就教大家學會創建一種圖表之後再創建其他的圖表就會更容易,能舉一反三了. 工具/原料 電腦 excel 方法/步驟 首先,打開一篇excel. 按住ctrl鍵,選擇你要 ...
  7. 在windows xp系統中使用Outlook創建電子郵件

    日常工作中,我們的辦公工作經常會用到電子郵件,此時可以在windows xp系統中使用Outlook創建電子郵件. 工具/原料 windows xp系統 outlook 2003 方法/步驟 要想創建 ...
  8. word表格中數據計算方法:[2]直接輸入域代碼

    本方法適用於對WORD的域比較熟悉的朋友,對於普通辦公人員,如果對域的含義不太了解的話,可以多做練習. 工具/原料 word 方法/步驟 將光標移動到計算結果的單元格,按CTRL+F9插入域標識{}, ...
  9. 怎樣給EXCEL中一列空白統一輸入固定值

    EXCEL中有時候需要填充數字,所以給大家介紹一種快速填充一列統一數字的方法. 方法/步驟 這個就是示例,我需要在考勤這一欄裡面都輸入100. 先發光標放到旁邊的記分. 然後按住CTRL+方向鍵↓,光 ...
  10. excel中數字和時間的輸入方法

    在excel中正確輸入時間的日期的方法 方法/步驟 如輸入五分之二時:當你輸入2/5電腦中顯示的是2月5日,正確輸入法是0空格2/5 時間的輸入:ctrl加分號等於當天日期,ctrl加shift加冒號 ...
  11. php中顯示格式化的用戶輸入(二)

    請參看下面的原始碼: <?PHP function format_output($output) {/********************************************** ...
  12. OLAP分析工具FineBI中業務包的創建和刪除

    為了增強數據業務包的可讀性和實用性,OLAP分析工具FineBI對業務包提供了一系列的設置項,對數據業務包進行資料庫轉義,建立關聯關係,也可以手動選擇將數據表中需要使用的欄位添加到Cube中. 工具/ ...
  13. 如何在插入word文檔中的圖片創建透明區域

    有時在插入word文檔中的圖片中,某片顏色影響文檔的效果,就需要該圖片中的局部顏色與背景色一致,就需要把圖片中的該部分顏色做成透明的了. 設置透明色可以使圖片與頁面渾然一體.Word除了動態的GIF圖 ...
  14. excel中,如何創建面積圖(1)

    創建圖標是一件比較簡單的事情.下面就教大家學會創建一種圖表之後再創建其他的圖表就會更容易,能舉一反三了. 工具/原料 電腦 excel 方法/步驟 首先,打開一篇excel. 按住ctrl鍵,選擇你要 ...
  15. excel中,如何創建複合餅圖

    創建圖標是一件比較簡單的事情.下面就教大家學會創建一種圖表之後再創建其他的圖表就會更容易,能舉一反三了. 工具/原料 電腦 excel 方法/步驟 首先,打開一篇excel. 按住ctrl鍵,選擇你要 ...
  16. 怎樣在word中通過網格創建表格

    表格由水平的行和垂直的列組成,行與列交叉形成的方框稱為單元格.下面小編將為大家詳細介紹如何創建表格. 工具/原料 電腦 word 2007辦公軟體 方法/步驟 1,啟動word2007,單擊" ...
  17. excel中,如何創建堆積面積圖(1)

    創建圖標是一件比較簡單的事情.下面就教大家學會創建一種圖表之後再創建其他的圖表就會更容易,能舉一反三了. 工具/原料 電腦 excel 方法/步驟 首先,打開一篇excel. 按住ctrl鍵,選擇你要 ...
  18. 如何在EXCEL中修改圖表的布局,類型或樣式?

    如何在EXCEL中修改圖表的布局,類型或樣式? 工具/原料 EXCEL 方法/步驟 請首先單擊圖表區.每個"圖表工具"選項卡上都包括用於自定義所選圖表的命令. 單擊突出顯示的選項卡 ...
  19. C#(4.0)如何創建webservice--windows服務類型

    現在app越來越火了,那麼app端的數據交互就缺不了webservice了.大部分都是使用webservice來進行數據交互.那麼我們應該如何創建webservice呢?下面我們介紹一下C#(4.0) ...
  20. 在EXCEL表格中定位空值,批量輸入同一個數

    在製作一些表格時,相信大家會遇到這種問題,統計數據表格時,需要在表格空白處同時填入一個數為文字,今天就以填入"0"為例說明一下. 工具/原料 EXCEL表格 電腦 方法/步驟 打開 ...