placeholder,显示描述信息

<form action="">
    <input type="search" name="keyword" placeholder="长乐未央">
</form>

image.png

autocomplete,自动完成

<form action="" autocomplete="on">
    昵称:<input type="text" name="nickname"><br><br>
    E-mail:<input type="email" name="email" autocomplete="off"><br><br>
    <input type="submit" value="提交">
</form>

image.png

3. autofocus,表单自动获取焦点

<form action="">
    用户名: <input type="text" name="username" autofocus>
</form>

image.png

4. list 和 datalist 元素

<form action="">
    站点地址: <input type="url" list="url-list" name="link">
    <datalist id="url-list">
        <option label="长乐未央" value="https://clwy.cn">
        <option label="canon4ever" value="https://www.canon4ever.com">
    </datalist>
</form>

image.png

5. min、max 和 step 滑块最小值、最大值和步长

<form action="">
    <input type="range" min="0" max="100" value="0" step="20">
</form>

image.png

6. required 必填

<form action="">
    <input type="text" name="username" required>
    <input type="submit" value="提交">
</form>

image.png

7. pattern 验证

使用正则表达式进行验证

<form action="">
    <input type="text" pattern="[0-9]{4}" title="只能输入0-9的数字,且刚好4位数">
    <input type="submit" value="提交">
</form>

image.png

已添加到喜欢了