html5表单

来源：互联网发布：tuneskit for windows 编辑：程序博客网时间：2024/06/05 03:42
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        /*<!-- 属性设置同html5-->*/        /*form{*/            /*width: 100%;*/            /*/!* 最大宽度*!/*/            /*max-width: 640px;*/            /*/!* 最小宽度*!/*/            /*min-width: 320px;*/            /*margin:0 auto;*/            /*font-family: "Microsoft Yahei";*/            /*font-size: 20px;*/        /*}*/        /*input,meter,progress{*/            /*display: block;*/            /*width: 100%;*/            /*height:30px;*/            /*margin:10px 0;*/        /*}*/    </style></head><body><!-------------------------表单的类型--------------------------------><!-- type：表单的类型--><!--<input type="file" />--><form action=""><!--action 提交表单的地址-->    <fieldset>        <legend>表单属性</legend><!--表单大外框名称-->            <label for="ee"><!--for跟的是Id值 可以喝input里面的Id值关联 点击名称 自动获取焦点-->                <!-- 邮箱属性 自动验证输入是否有误 ”邮箱可以“用中文 也可以用英文不影响判断-->                邮箱:<input type="email" name="email" id="ee"/>            </label>            <!-- url属性 也会验证网址输入是否有误-->            <label for="">                url:<input type="url" name="url" id="" >            </label>            <label for="">                <!-- 数字类型 step=3 输入的数字为3的倍数默认上下拉滚动条-->                number：<input type="number" name="number" step="3"/>            </label>            <label for="">                <!-- 在浏览器上栏显示输入内容-->                tel：<input type="tel" name="tel"/>            </label>            <label for="">                <!-- 搜索框 输入内容被提交到浏览器地址栏-->                search: <input type="search" name="search"/>            </label>            <label for="">                <!-- range进度条 定义最小值 最大值 -->                range: <input type="range" name="range" value="100" min="0" max="300"/>            </label>            <!-- time，date-->            <label for="">                <!-- 时间格式 -->                time：<input type="time" name="time"/>            </label>            <label for="">                <!-- date年月日 带下拉列表弹出日历功能  可以选择-->                date: <input type="date" name="date" />            </label>            <label for="">                month: <input type="month" name="month" />            </label>            <label for="">                week: <input type="week" name="week" />            </label>            <input type="submit" value="提交"/>    </fieldset></form><!-----------------------------------------智能下拉表单--------------------------------------------->                <select >                    <option>选项1</option>                    <option>选项1</option>                    <option>选项1</option>                    <option>选项1</option>                </select>                <br/><br/><br/>                <!--  一个普通的输入框-->                <!-- 通过list=car 跟下面的 datalist标签中的id值进行关联-->                <input type="text" list="car" />                <!-- datelist为下拉菜单标签-->                <!--数据列表标签-->                <datalist id="car">                    <option>宝马</option>                    <option>宝骏</option>                    <option>宝强</option>                    <option>宝宝</option>                    <option>奥迪</option>                    <option>奥迪奥</option>                    <option>迪奥</option>                </datalist><!-------------------------------------表单元素--------------------------------------------><form action="">    <fieldset>        <legend>表单元素</legend>        <label>            用户名：<input type="text" name="userName" />        </label>        <label>            <!--密码属性-->            密码：<input type="password" name="pwd" />        </label>        <label >            性别：<input type="text" name="sex" list="sex" />        </label>        <!-- 定义数据列表-->        <datalist id="sex">            <option >男</option>            <option >女</option>            <option >不祥</option>            <option >其它</option>        </datalist>        <label for="">            推荐人：<output>春哥</output>        </label>        <br/><br/>        <label for="">            加密类型： <keygen/>        </label>        <br/><br/>        <label for="#">            度量器：<meter value="50" max="100" min="0" low="30" high="80"></meter>        </label>        <!-- 进度条-->        <progress value="40" max="100" min="0"></progress>        <!-- progress 进度条 progress progress progress 进度条progress 进度条        progress 进度条 -->        <input type="submit" value="提交"/>    </fieldset></form><!-----------------------------------表单属性-------------------------------------------------------->            <!--<!– 表单新增属性–>-->            <!--<input type="text" class="name" />-->            <!--                placeholder:提示文字（占位符）                autofocus:自动获取焦点                autocomplete: 自动完成（填充的） on 开启（默认）  off 取消自动提示                required: 必填                multiple: 多选                novalidate:关闭默认的验证功能（只能加给form）                pattern: 自定义正则验证                pattern="1\d{10}"            -->    <!--<form action="" novalidate>-->    <form action="" >        <fieldset>            <legend>表单属性</legend>            <label for="">                <!--  placeholder:提示文字（占位符）   autofocus:自动获取焦点 应用-->                用户名：<input type="text" placeholder="例如：李狗蛋" autofocus name="userName" autocomplete="on" required/>            </label>                <!--  pattern: 自定义正则验证 pattern="1\d{10}" 应用-->            <label for="">                电话：<input type="tel" pattern="1\d{10}" />            </label>            <!-- 上次文件-->            <input type="file" name="file" multiple/>            <input type="submit" />        </fieldset>    </form></body></html>
0 0