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之間 ）

使用APP時，用戶獲得信息往往是通過輸入框，然而這部分卻是很多設計者容易忽略的部分。本篇文章為大家總結了常見的四大輸入框樣式，并分析了其使用場景和注意事項。

輸入框作為頁面中主要的數據錄入入口，可引導用戶錄入信息。我們從APP中獲得的所有信息來源，均是由用戶通過輸入框得來，可見他的重要性。

往往很多APP在設計時卻很容易忽視這塊，標注不清楚、字體限制未標明、文字單行和多行樣式等都不設計出來，導致技術人員在實現時要么靠過往經驗，要么找你繼續了解。

不過無論哪一種方式其實都比較浪費時間，這些如果我們平時去總結分析后，是可以避免的。

今天的文章，我們總結下APP中常見的四大輸入框樣式，即獨立文本標簽輸入框、行內標簽輸入框、對話輸入框、段落文字等，同時總結分析他們的使用場景和注意事項。

一、獨立文本標簽輸入框

獨立文本標簽即在左側以文字的形式提示輸入內容，同時在內容輸入取預設內容，當輸入信息后，由于左側清晰的文字標簽，不管內容多少我們仍然能夠很清晰的瀏覽和操作。

當然由于內容信息的組合、多少不同，我將其歸納為四種形式：

1. 單項輸入
2. 多項輸入
3. 段落文本
4. 多行輸入

以下分別是獨立文本標簽輸入框中的四種形式，掌握這些可以讓我們在表格列表設計中更加高效。

（配圖來自微信小程序規范）

當然，除了知道它有哪些形式是不夠的？

作為設計師，我們還需要知道它對應的一些規范，只有掌握了這些規范，我們才能夠更好的落地，首先來看看有規范和沒規范是怎么樣的。

1. 當沒有規范時：

標題長短未規定，同時輸入文本未對齊，整個界面感覺混亂不堪。

2. 當有規范時：

個界面清晰明了，當你將這個規范交給技術，他就能夠按照你設計的效果實現，而如果你前期設計不到位，技術就按照他自身的想法實現，自然出來的效果你總會說還原度不高，別人也說這個體驗不好。有時候還原度不高，體驗不好，作為設計師你是不是應該好好想想。

下圖以微信小程序規范為例：

最后，掌握了規范還不夠，我們還可以做得更加細化？

1. 設計錯誤提示：在信息輸入錯誤后，即可看到報錯提示，這樣可以提醒用戶讓其及時修正。

市面上很多APP為了方便，直接提交整個表單后才提示錯誤，這樣開發成本雖然降低，但是用戶的操作成本增加，具體如何選擇就看你產品的用戶量如何，當然一個好的用戶體驗需要考慮這些問題。

2. 輸入鍵盤對應輸入信息：輸入框往往有金額、文字、電話號碼、卡號、身份證號輸入等，一個好的交互體驗就是當你需要輸入電話號碼，鍵盤直接幫你定位在數字鍵，當你輸入身份證號，鍵盤直接是數字加X，讓你輸入更便捷不用切換。

上圖你看到支付寶的充值和銀行卡界面，這些細節的體現正是決定一個好的產品和差的產品的區別。

二、行內標簽輸入框

行內標簽輸入框是UI設計中最常見的控件，在絕大多數的場合用來給用戶輸入少量的文字。

比如：搜索、登陸注冊等。

行內標簽相對于獨立文本標簽樣式較為流行，相對較為簡潔，但是對于屏幕上顯示超過2個文本框的情況，行內標簽則不是獨立文本標簽的一個好的取代方案。

其缺點就是一旦用戶點擊了輸入框，標簽就消失了，這樣用戶就不能二次檢查他們輸入的內容是不是他們應該輸入的類型。同時由于已經輸入過一次，因此第二個輸入框很容易被忽略。

三、對話輸入框

對話輸入框常見于聊天消息類界面，其特點是當你輸入一行信息時，不會有什么變化，但是當你輸入多行信息時，如果你不出相應規則，那么后期落地就只有根據技術喜好了。

在設計時，我們不僅要做常規樣式，還需要做輸入多行的效果，這樣開發拿到手才不會一抹黑，也不會在心里默默罵你不專業了。

以微信對話輸入框為例，當文字一行時，輸入框正常顯示；當文字兩行時，輸入框自動向上升，圖標按鈕位置不變；當為五行以上時，文字可上下滑動顯示，同時露出一點文字，讓用戶清楚，上面還有字的情況。

四、段落文字

段落文字的使用場景主要分兩種情況：

• 一種是常見的APP社交模塊處，具有發表發布的模塊；
• 一種是設置頁面，需要設置一些個人資料。

1. 發表或者發布模塊：

以新浪微博為例，如果你輸入的文字超出140字，超過該字數則以橙色文字顯示，區別的是他并沒有和其他發布平臺限制字數，而是當文字超出140字時展示會將文字進行折疊顯示。

2. 個人設置模塊：

該位置的輸入框有字數限制，這時候在界面上就會顯示限制文字多少，當前輸入文字多少，同時超出文字范圍，以提示框顯示。

上面以轉轉為例，轉轉個人設置頁面限制300個字，當默認狀態顯示0/300，同時輸入時顯示輸入文字個數，當超出限制字數，則以氣泡提示，這才是一個好的交互流程。

五、總結

1. 獨立文本標簽輸入框：獨立文本標簽即在左側以文字的形式提示輸入內容，因此當輸入信息后，其結構仍然清晰。多用于設置頁面、資料修改頁面等。主要有4中表現形式：單項輸入、多項輸入、段落文本、多行輸入。
2. 行內標簽輸入框：在絕大多數的場合用來給用戶輸入少量的文字，不適用文字列表超過2個的情況。但是由于其樣式流行，因此多用于登陸界面等。
3. 對話輸入框：在設計時需要考慮不同狀態的設計，不要只做個基礎界面就給開發，一行文字情況、多行、超過5行的情況，分別是什么樣式，需要設計并標注清楚。
4. 段落文字：多用于資料修改、文字發布等地，在設計時需要考慮未輸入情況、輸入文字情況、超出文字限制等情況。

參考鏈接

http://www.woshipm.com/ucd/392706.html/ 文本輸入框設計的那些潛規則，你知道多少？

作者：風箏，做個正能量的小太陽，不拖延，不偷懶，勵志為孩子做個好榜樣，公眾號：海鹽社。

本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

前端開發中，經常需要獲取用戶輸入框中的內容。本文將介紹幾種常用的JavaScript方法來獲取輸入框內容，幫助您輕松應對獲取輸入框內容的需求。

方法一：使用 value 屬性

let input = document.getElementById("myInput");
let content = input.value;
console.log(content);

通過 getElementById() 方法獲取輸入框的 DOM 元素。

使用 value 屬性獲取輸入框的文本內容。

方法二：使用 querySelector() 方法

let input = document.querySelector("#myInput");
let content = input.value;
console.log(content);

使用 querySelector() 方法獲取輸入框的 DOM 元素。

使用 value 屬性獲取輸入框的文本內容。

方法三：使用 onchange 事件

let input = document.getElementById("myInput");
input.onchange = function() {
 let content = input.value;
 console.log(content);
}

通過 onchange 事件在輸入框內容變化時觸發函數。

在事件處理函數中，使用 value 屬性獲取輸入框的新文本內容。

方法四：使用 oninput 事件

let input = document.getElementById("myInput");
input.oninput = function() {
 let content = input.value;
 console.log(content);
}

通過 oninput 事件實時獲取輸入框內容的變化。

在事件處理函數中，使用 value 屬性獲取輸入框的新文本內容。

以上是JavaScript獲取輸入框內容的幾種常用方法。您可以根據具體的需求和場景選擇適合的方法。在實際開發中，根據頁面結構和交互需求選擇最合適的方式獲取輸入框內容，以提升用戶體驗。

注意：

本文僅供參考，請根據實際情況進行使用。

在獲取輸入框內容時，可以通過驗證和過濾確保數據的安全性。

對于多個輸入框，可以使用不同的方法來獲取各自的內容。