HTML如何制作在透明輸入框里面添加圖標

TML如何制作在透明輸入框里面添加圖標

最近在寫一個律師推薦前臺的網站，在上面搜索框這里出現了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題：

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面，然后將輸入框的border設置為0px，最后設置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)設置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間）

nput框作為一個簡單的輸入框,你對它的屬性知道有多少？
常見的屬性（帶new為h5新增屬性）:

1、accept：accept 屬性規定了可通過文件上傳提交的服務器接受的文件類型。僅用于input的type類型為"file"的時候。

屬性值：

audio/*，音頻

video/* ，視頻

image/* ，圖片

MIME_type，一個有效的 MIME 類型，不帶參數

  <input type="file" name="pic" accept="image/*" />

// 如需規定多個值，請使用逗號分隔

<input  type="file" accept="audio/*,video/*,image/*" />

2、value：指定元素的value值。

屬性值：text

value 屬性對于不同 input 類型，用法也不同：

對于 "button"、"reset"、"submit" 類型 - 定義按鈕上的文本
對于 "text"、"password"、"hidden" 類型 - 定義輸入字段的初始（默認）值
對于 "checkbox"、"radio"、"image" 類型 - 定義與 input 元素相關的值，當提交表單時該值會發送到表單的 action URL。

注意：value 屬性對于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 屬性不適用于 <input type="file">。

<input value="文本" />

3、name:表示的該文本輸入框名稱。用于表單提交后引用表單數據。只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

屬性值：text

<input type="text" name="email" />

4、size：輸入框的長度大小。

屬性值：number

<input type="text" name="email" size="35" />

注意：size 屬性適用于下面的 input 類型：text、search、tel、url、email 和 password。

5、maxlength：輸入框中允許輸入字符的最大數。

屬性值：number

<input type="text" name="usrname" maxlength="10" />

6、readonly：表示該框中只能顯示，不能添加修改。

<input type="text" name="country" value="中國" readonly />

7、required（new）：屬性規定必須在提交表單之前填寫輸入字段。

 <input type="text" name="username" required />

8、alt：定義圖像輸入的替代文本。 (只針對type="image")

屬性值：text

<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />

9、autocomplete（new）：autocomplete 屬性規定輸入字段是否應該啟用自動完成功能。

屬性值：on/off，默認啟動自動完成功能。

<input autocomplete="off" />

注意：autocomplete 屬性適用于下面的 <input> 類型：text、search、url、tel、email、password、datepickers、range 和 color。

10、autofocus（new）：屬性規定當頁面加載時 <input> 元素應該自動獲得焦點。

屬性值：autofocus

<input type="text"  autofocus />

11、checked：checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio")

屬性值：checked

<input type="checkbox" name="vehicle" value="Car" checked />小汽車

12、disabled：disabled 屬性規定應該禁用的 <input> 元素。

屬性值：disabled

<input type="text" name="lname" disabled />

13、form（new）: form 屬性規定 <input> 元素所屬的一個或多個表單。

位于 form 表單外的輸入字段（但仍然屬于 form 表單的一部分）：

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
   <input type="submit" value="提交">
</form>

14、formaction（new）:屬性規定當表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image")

屬性值：URL

<input type="submit" formaction="demo-admin.php" value="提交" />

注意：

formaction 屬性規定當表單提交時處理輸入控件的文件的 URL。

formaction 屬性覆蓋 <form> 元素的 action 屬性。

15、formenctype（new）：屬性規定當表單數據提交到服務器時如何編碼(只適合 type="submit" 和 type="image")。

屬性值：application/x-www-form-urlencoded ；multipart/form-data text/plain

<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />

注意：

formenctype 屬性規定當表單數據提交到服務器時如何編碼（僅適用于 method="post" 的表單）。

formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。

16、formmethod （new）：定義發送表單數據到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")

屬性值：get / post

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />

17、formnovalidate（new）：formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。

屬性值：formnovalidate

<input type="submit" formnovalidate="formnovalidate" value="不驗證提交">

18、formtarget （new）:規定表示提交表單后在哪里顯示接收到響應的名稱或關鍵詞。(只適合 type="submit" 和 type="image")

屬性值：_blank； _self； _parent； _top； framename

<input type="submit" formtarget="_blank" value="提交到一個新的頁面上">

19、height （new）;width（new）:屬性規定 <input> 元素的高度和寬度。 (只針對type="image")

屬性值：pixels

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />

20、max （new）;min（new）:屬性規定 <input> 元素的最大值和最小值。

屬性值：number；date

 <input type="date" name="bday" max="1979-12-31">
  <input type="date" name="bday" min="2000-01-02">  
<input type="number" name="quantity" min="1" max="5">

21、multiple （new）：屬性規定允許用戶輸入到 <input> 元素的多個值。

屬性值：multiple

<input type="file" name="img" multiple>

注意：multiple 適用于以下 input 類型：email 和 file。

22、pattern （new）：pattern 屬性規定用于驗證 <input> 元素的值的正則表達式。

屬性值：regexp;

<form action="demo_form.html">
   Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
   <input type="submit">
</form>

23、placeholder （new）：屬性規定可描述輸入 <input> 字段預期值的簡短的提示信息。

屬性值：text

<input placeholder="請輸入姓名" />

24、src : src 屬性規定顯示為提交按鈕的圖像的 URL。 (只針對 type="image")

屬性值：URL

<input type="image" src="submit.gif" alt="Submit" />

25、step （new）: step 屬性規定 <input> 元素的合法數字間隔。

屬性值：number

<input type="number" name="points" step="3">

26、list（new） :屬性引用 <datalist> 元素，其中包含 <input> 元素的預定義選項。

屬性值：datalist_id

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

27、type: type 屬性規定要顯示的 <input> 元素的類型。

屬性值：button；checkbox；color；date；datetime；datetime-local；email；file；hidden；image；month；number；password；radio；range；reset；search；submit；tel；text；time；url；week

type的屬性值眾多，也是用的比較多的一個。

button：定義可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本）。

checkbox：定義復選框。

color（new）：定義拾色器。

date（new）：定義 date 控件（包括年、月、日，不包括時間）。

datetime（new）：定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基于 UTC 時區）。

datetime-local（new）：定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。

email（new）：定義用于 e-mail 地址的字段。file定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。

hidden：定義隱藏輸入字段。

image：定義圖像作為提交按鈕。

month（new）：定義 month 和 year 控件（不帶時區）。

number（new）：定義用于輸入數字的字段。

password：定義密碼字段（字段中的字符會被遮蔽）。

radio：定義單選按鈕。

range（new）：定義用于精確值不重要的輸入數字的控件（比如 slider 控件）。

reset：定義重置按鈕（重置所有的表單值為默認值）。

search（new）：定義用于輸入搜索字符串的文本字段。

submit：定義提交按鈕。

tel（new）：定義用于輸入電話號碼的字段。

text：默認。定義一個單行的文本字段（默認寬度為 20 個字符）。

time（new）：定義用于輸入時間的控件（不帶時區）。

url（new）：定義用于輸入 URL 的字段。

week（new）：定義 week 和 year 控件（不帶時區）。

們在上網的時候，經常有一些登錄界面進行輸入賬號和密碼，以及我們在網上填一些信息，這些功能的實現都是通過表單來完成的，今天我們就來講講表單。

表單不是指一個標簽，而是指一類標簽。

我們表單里所有的內容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內容發送到想要發送的后臺，而method屬性有兩個值，分別是get和post。get和post的主要區別是get表單所傳的內容會在地址欄里顯示出來，并且有長度限制，而post表單所傳的內容不會在地址欄顯示出來，并且可以視為沒有長度限制。一般系統默認get。當然get和post的細區別還是有的，在這里我就不贅述了。

其中最重要的是<input>標簽，input標簽也是單標簽。input標簽的type屬性值不同，其產生的作用也不同：如：<input type="text">產生的是文本框，一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產生的是密碼框，一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產生的是提交框，一般是我們登錄的那個按鈕。這些標簽都有value屬性，但只有提交框用最合適用，因為文本框和密碼框雖然也會展示出來，但效果卻差強人意，我們一般都用placeholder屬性替代它。

不知大家有沒有在網上做過選擇題，作者是做過的。網頁中的選擇題也是用的input。

input的type屬性值還有radio，是單選框，有幾個選項就寫幾個input，但要注意每一個input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會知道這些是同一道題。

既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個屬性是checked=“checked”，這個可以設定默認選擇的選項。

我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況，其實input選擇框只有被點擊的時候才能選中，但有的時候太小不容易點擊甚至有的根本沒有顯示出來，這樣的話用戶體驗就會非常的差，所以我們引進了一個標簽：<label></label>標簽，這個標簽可以實現點擊文字就進行選擇的功能，用法就是將input標簽和文字寫在同一個label標簽中，注意每一個選項寫一起。

我們來看一下代碼和結果：

作者已經盡量去說清楚了，歡迎大家批評指教，希望多多關注[送心]

在線咨詢

上一篇：Facebook全球范圍內推廣HTML5游戲平臺
下一篇：HTML5(七)-SVG基礎入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML如何制作在透明輸入框里面添加圖標

TML如何制作在透明輸入框里面添加圖標

基本思路

您的項目需求