表单格式及输入验证

最新推荐文章于 2024-03-14 15:32:33 发布

原创最新推荐文章于 2024-03-14 15:32:33 发布 · 736 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

HTML5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML表单示例，通过内联样式控制输入框的状态显示，当输入有效时背景色为白色，无效时变为红色。此外，通过JavaScript阻止了表单提交时页面的默认刷新行为。

<htmel>
<head>
<title>MyWebTest</title>    
<style>
    form {
        width: 500px;
        padding: 10px;
        margin: 10px;
    }
    input:valid {background-color: white;}   //输入正确时背景色
    input:invalid {background-color: red;}   //输入错误时背景色
</style>
<script>
    var bname;   
    var bage;
function change(){
    bname=f.name.value;
    bage=Number(f.age.value);
    return false;                      //返回false,页面重载不刷新表单
}    
</script>
</head>
<body>
<form id="f" name="f" onsubmit="return change()">                 //避免提交后页面刷新
名称 <input name="name" value="text" type="text"/>
年纪 <input name="age" value="12" type="number" min="0" max="99"/> //限制为0~99数字
<input type="submit" value="提交"/>
</form>    
</body>
</htmel>