在設計web頁面時，輸入框是很常見的元素。在使用輸入框時，我們往往需要輸入數據且不想讓用戶輸入空值，此時如何設置非空呢？我們可以通過HTML input設置非空，以下是如何實現：

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

在input標簽中使用required屬性即可設置為非空。這個屬性可以應用于任何類型的input，包括郵箱，電話號碼，日期，數字以及密碼等。它會阻止提交表單，除非input中有一個值。

在前端非空驗證中，通常有更多的展現方式，如給出提示信息。以上面的代碼為例：

<label>請輸入用戶名: </label>
<input type="text" name="username" required>
<p class="warning-info">用戶名不能為空！</p>

在上述代碼中，我們通過添加label標簽和class為warning-info的p標簽，完善了非空驗證功能，并且更加友好的提示了用戶。

除了使用required屬性，還有其他的一些方式可以實現非空驗證。例如，在使用jQuery時，可以通過以下代碼實現：

<input type="text" name="username">
<p class="warning-info">請輸入用戶名</p>
$("input[name='username']").blur(function(){
if(this.value === ""){
$(this).next(".warning-info").show();
}else{
$(this).next(".warning-info").hide();
}
});

以上代碼使用了jQuery，通過給input綁定blur事件，當輸入框失去焦點時，判斷值是否為空，如果為空，顯示提示信息，否則隱藏提示信息。

總而言之，在web頁面開發過程中，驗證用戶輸入數據的非空性是非常重要的。無論使用哪種方式，我們都需要確保用戶輸入的數據是可靠的。