在web開發中，輸入框始終是不可或缺的一部分。有時候我們不希望用戶一進入頁面就看到所有的輸入框，而是希望默認隱藏，在特定情況下再顯示出來，這時候我們可以使用JavaScript來實現。

下面我們就來看一些輸入框默認隱藏的例子，看看JavaScript是如何實現的。

<!--例1: 一個按鈕控制多個輸入框的顯示與隱藏-->
<button onclick="toggle()">顯示/隱藏</button>
<div id="inputWrapper" style="display:none;">
<input type="text" name="username">
<input type="password" name="password">
</div>
<script>
function toggle() {
var inputWrapper = document.getElementById("inputWrapper");
if (inputWrapper.style.display === "none") {
inputWrapper.style.display = "block";
} else {
inputWrapper.style.display = "none";
}
}
</script>

這個例子中，我們定義了一個按鈕，當用戶點擊按鈕時，通過toggle()函數可以實現輸入框的顯示和隱藏。我們通過設置輸入框所在的div的display樣式為none來隱藏輸入框，設置為block來顯示。通過判斷當前display屬性，就可以實現輸入框的顯示和隱藏。

<!--例2: 根據用戶的選擇來顯示/隱藏不同的輸入框-->
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<div id="maleWrapper" style="display:none;">
<input type="text" name="maleName">
<input type="password" name="malePassword">
</div>
<div id="femaleWrapper" style="display:none;">
<input type="text" name="femaleName">
<input type="password" name="femalePassword">
</div>
<script>
var maleWrapper = document.getElementById("maleWrapper");
var femaleWrapper = document.getElementById("femaleWrapper");
var radioButtons = document.getElementsByName("gender");
for(var i=0; i < radioButtons.length; i++) {
radioButtons[i].onchange = function() {
if (this.value === "male") {
maleWrapper.style.display = "block";
femaleWrapper.style.display = "none";
} else if (this.value === "female") {
maleWrapper.style.display = "none";
femaleWrapper.style.display = "block";
}
};
}
</script>

在這個例子中，我們根據用戶選擇的性別，顯示不同的輸入框。我們首先定義了兩個div，包含男性和女性對應的輸入框，設置了display屬性為none。然后通過獲取所有的單選框，監聽它們的onchange事件，根據用戶選擇的性別，動態地設置div的display屬性，來顯示或者隱藏相應的輸入框。

這些例子只是很簡單的JavaScript實現方法，實際上我們還可以使用其他的JavaScript庫框架來方便地實現輸入框的顯示和隱藏，比如jQuery的fadeIn()和fadeOut()等方法。

總之，在web開發中，隱藏和顯示輸入框是一種非常實用的技術，不僅使頁面看起來更加簡潔，還可以根據用戶的選擇來靈活地展示和收起相應的輸入框。希望本文能夠對大家理解如何使用JavaScript來實現隱藏和顯示輸入框有所幫助。