关于之前的html5表单总结案例

最新推荐文章于 2022-04-16 20:14:42 发布

慕雨星岩

最新推荐文章于 2022-04-16 20:14:42 发布

阅读量288

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/lmuyu/article/details/104923053

版权

回顾之前html5新增的表单元素及type属性，在这里可以用一个案例来总结一下之前所学

表单效果图：
form
在这个表单中涉及到的知识点有：

placeholder :提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注意：placeholder 属性适用于以下的 <input>类型：text, search, url, telephone, email 以及 password。
<input>类型为 tel：它并不是用来实现验证，它的本质是为了能够在移动端打开数字键盘。意味着数字键盘就限制了用户只能输入数字。如何查看效果：使用QQ发送文件>>手机端QQ接收文件>>使用手机浏览器打开文件。
<input>类型为 email：提供了默认的完整邮箱格式验证，如果不满足当前验证，会阻止提交。
通过datalist创建选择列表（不仅可以选择，还可以输入）。注意：需要建立输入框和选项框的关联 list=“datalist的id号”,功能非常强大，但是不同的浏览器对其支持也是不一样的，日常使用中，比较少

 所属学校：<input type="text" name="school" id="school" list="myList">
 <datalist id="myList">
    <option value="北京大学"></option>
    <option value="天津大学"></option>
    <option value="清华大学"></option>
 </datalist>

<input>类型为 number：只能输入数字（包含小数点），不能输入其他字符。max：最大值；min：最小值；value：默认值。
度量器meter：衡量当前进度值。high:规定的较高的值；low:规定的较低的值；max:最大值；min:最小值；value:当前度量值；
<input>类型为 data：日期时间相关，年月日。
值得注意的是，在这个表单中有一个<legend>标签,<legend>标签通常和<fieldset>标签一起使用来将表单内的相关元素分组，<legend>标签的作用是为fieldset元素定义标题。作用效果是在fieldset对象绘制的方框内插入一个标题。
说明：<legend>标签必须在<fieldset>标签中使用，不然没有什么意义和效果
如图：

表单完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        form{
            width: 490px;
            height: 600px;
            margin: auto;
            padding-left: 10px;
            padding-top: 10px;
        }
        input{
            margin-top: 4px;
            margin-bottom: 8px;
            border: none;
            border: 1px solid #ccc;
            width: 470px;
            height: 30px;
        }
        meter{
            margin-top: 4px;
            margin-bottom: 8px;
            width: 470px;
            height: 30px;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label for="username">姓名：</label><br><input type="text" name="username" id="username" placeholder="请输入用户名">
        手机号码：<br><input type="tel" name="tel" id="tel"  >
        邮箱地址：<br><input type="email" name="email" id="email">
        所属学校：<input type="text" name="school" id="school" list="myList">
        <datalist id="myList">
            <option value="北京大学"></option>
            <option value="天津大学"></option>
            <option value="清华大学"></option>
        </datalist>
        入学成绩：<br><input type="number" id="gread" max="100" min="0" value="0">
        基础水平：<br><meter max="100" min="0" low="60" high="90" ></meter>
        入学日期：<br><input type="date" name="inData" >
        毕业日期：<br><input type="date" name="outData" >
        <input type="submit" value="提交">
    </fieldset>
</form>
<script>
	//获取相关元素
    var gread = document.querySelector("#gread");
    var meter = document.querySelector("meter");
    //输入赋值给进度条
    gread.oninput = function () {
        meter.value=gread.value
    }
    </script>
</body>
</html>