HTML5表單文本輸入框是網頁設計中經常用到的元素之一。在HTML5中,文本輸入框的功能得到了進一步的改進和增強。下面為大家介紹一下HTML5表單文本輸入框的使用方法。
首先,我們需要一個包含表單及文本輸入框的HTML頁面。HTML5表單一般使用form標簽來定義表單,而文本輸入框則使用input標簽,如下所示:
<form action="submit.php" method="post">
<p>
<label for="name">姓名</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email">郵箱</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="phone">電話</label>
<input type="tel" id="phone" name="phone" required>
</p>
<p>
<label for="message">留言</label>
<textarea id="message" name="message"></textarea>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
解釋一下以上代碼。首先,我們定義了一個表單,并指定了它的提交地址和提交方式(此處使用POST方式)。然后,我們依次定義了四個輸入框。
其中,姓名、郵箱和電話的輸入框使用了type屬性。type屬性指定了輸入框的類型,這里分別使用了text、email和tel類型。它們的作用分別是用于輸入文本、輸入郵箱和輸入電話號碼。同時,我們使用了required屬性,這表示這些輸入框必須填寫,否則提交按鈕將無法使用。
最后,我們使用了textarea標簽定義一個留言框,并設置了id和name屬性。當然,這個留言框也需要填寫才能提交。
以上就是HTML5表單文本輸入框的基本代碼。可以根據需要進行修改和擴展。上一篇html5表單網頁代碼
下一篇html5表單網站代碼