网站前端Form表单提交,提示此字段不能为空

1.提示占位 placeholder

<input type="text" name="userName" placeholder="请输入用户名">

placeholder的文本默认是浅灰色,如果要修改,可以通过伪元素来进行设置

input::placeholder{
    color: red;
}

2.自动获取焦点 autofocus

添加这个属性后,页面加载时这个输入框会自动获取焦点

<input type="text" name="userName" autofocus>

3.自动完成 autocomplete:on打开(默认) off关闭

开启这个属性后,当这个输入框获取焦点时,会自动提示提交过的数据。
注意:数据必须成功提交过,且这个input标签必须有name属性,因为它依靠name属性的值来筛选提交过的数据,只有name属性值一致时,才会将之前提交的数据提示出来。

<div>
    用户名:<input type="text" name="userName" autocomplete="on">
    爱好:<input type="text" name="hobby" autocomplete="on">
</div>

4.必须输入,不能为空 required

如果此输入框未输入内容,则会阻止提交

<div>
    用户名:<input type="text" name="userName" required>
</div>

5.正则表达式验证 pattern

如果此输入内容不符合正则验证,则会阻止提交

<div>
    手机号:<input type="tel" name="tel" pattern="/^1\d{10}$/">
</div>

6.多选 multiple

<!-- 文件多选 -->
<div>文件:<input type="file" name="userFile" multiple></div>
<!-- 邮箱多选,每个邮箱用 逗号 隔开 -->
<input type="email" name="userEmail" multiple>

7.将输入框关联到其他表单中 form

表单默认只会提交它内部的input元素的内容,如果外部的input想要包含进来,则外部的input标签要设定form属性,值为目标form的id

<form id="myForm"></form>
<input type="text" name="user" form="myForm"></input>

8.H5新增表单事件 oninput

oninput:当元素内容发生改变机会触发
输入框每输入/减少一个字符,甚至连输入中文,还未选中文字时都会触发。
而change事件只会在输入完成,失去焦点时触发

<script>
    var tel = document.querySelector("[type=tel]")
    tel.oninput = function(){
        console.log("input")
    }
    tel.onchange = function(){
        console.log("change")
    }
</script>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注