首页 > 代码库 > html5表单元素

html5表单元素

2024-09-16 08:10:33   220人阅读

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <title>表单元素</title>
    <style>
    table{
        border:1px solid #ddd;
        border-collapse:collapse;
    }
    th,td{
        border:1px solid #ddd;
        padding:5px;
    }
    </style>
    <script>
        function txtRange_change(){
            var value=document.frm.txtRange.value;    
            console.log(value);
        }
        function getValue(){
            //1.获取txtColor控件的value
            var color=document.frm.txtColor.value;
            console.log("txtColor:"+color);
        }
    </script>
</head>
<body>
<form name="frm">
    <table>
        <tr>
            <th>名称</th>
            <th>控件</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>Email类型</td>
            <td>
            <input type="email" name="txtEmail">
            </td>
            <td>要求用户输入Email类型数据，提交表单时，会自动验证</td>
        </tr>
        <tr>
            <td>search类型</td>
            <td>
            <input type="search" name="txtSearch">
            </td>
            <td>搜索文本框，与text相似，特点是数据允许被快速删除</td>
        </tr>
        <tr>
            <td>url类型</td>
            <td>
            <input type="url" name="txtUrl">
            </td>
            <td>对用户输入的数据进行URL检测，如果不符合规范，给出提示，并阻止表单提交</td>
        </tr>
        <tr>
            <td>tel类型</td>
            <td>
            <input type="tel" name="txtTel">
            </td>
            <td>注意：只对移动终端有效，会显示出拨号键盘，通过该键盘接收用户录入的数据</td>
        </tr>
        <tr>
            <td>数字类型</td>
            <td>
            <input type="number" name="txtnumber" min="18" max="80" step="3">
            </td>
            <td>只能接收数字，min表示数字范围下限值，max表示数字范围的上限值，step表示步长</td>
        </tr>
        <tr>
            <td>范围类型</td>
            <td>
            <input type="range" name="txtRange" id="txtRange" min="18" max="80" step="1" value="18" onChange="txtRange_change()">
            </td>
            <td>提供一个滑块工具给用户去选择指定范围内的数值</td>
        </tr>
        <tr>
            <td>颜色类型</td>
            <td>
            <input type="color" name="txtColor" id="txtColor" >
            </td>
            <td>弹出一个调色版提供给用户选取颜色</td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <input type="submit" value="提交">
                <input type="button" value="取值"onclick="getValue()">
            </td>
    </table>
    </form>
</body>
</html>

技术分享

html5表单元素


联系
我们