4、H5表单控件 - HTML5&CSS3.0基础部分-xyphf

最新推荐文章于 2024-04-27 21:00:39 发布

xyphf_和派孔明

最新推荐文章于 2024-04-27 21:00:39 发布

阅读量1.4k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/xyphf/article/details/74297474

版权

HTML5 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1、带箭头加减的输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件 ——带箭头加减的输入框</title>
</head>
<body>
    <form action="http:www.baidu.com">
        <input type="number" name="number" value="" /><br /><br />
        <input type="submit">
    </form>
</body>
</html>

2、颜色选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com">
    <input type="color" name="color" value="" /><br /><br />
    <input type="submit">
</form>
</body>
</html>

3、进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件——滚动条</title>
<script>
window.onload = function(){
    var oText = document.getElementById('txt1');
    var oSpan = document.getElementById('s1');

    oText.onchange = function(){
        oSpan.innerHTML = this.value;
    }
}   
</script>
</head>
<body>
<form action="http://www.baidu.com">
    <input id="txt1" type="range" max="80" min="20" step="10" name="range" value="" /> <span id="s1">0</span><br /><br />
    <input type="submit">
</form>
</body>
</html>

4、时间选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间选择器</title>
</head>
<body>
<form action="http://www.baidu.com">
    <input type="date" name="date" value="" /><br /><br />
    <input type="week" name="week" value="" /><br /><br />
    <input type="time" name="time" value="" /><br /><br />
    <input type="submit">
</form>
</body>
</html>

5、email地址判断表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="httP://www.baidu.com">
        <input type="email" name="email" value="" />
        <br /><br />
        <input type="submit" />
    </form>
</body>
</html>

6、网站判断表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="url" name="url" value=""><br /><br />
        <input type="submit" />
    </form>
</body>
</html>

7、表单使用正则表达式验证QQ号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com">
    <input type="text" pattern="[1-9]\d{4,12}" required name="qq" value="" />
    <input type="submit" />
</form>
</body>
</html>

8、输入框提示文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com">
    <input type="text" pattern="[1-9]\d{4-12}" autofocus placeholder="提示文字" required name="qq" value="" />
    <br /><br />
    <input type="submit" />
</form>
</body>
</html>

9、带删除X的搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com/" novalidate>
        <input type="search" name="search" value="" />
        <br /><br />
        <input type="submit" />
    </form>
</body>
</html>