HTML H5 表单

在本节课程我们来学习HTML5 的表单标签。 H5表单几个组件是H4没有的。

HTML5引入了几个以验证的表单组件,可以在表单提交前对数据进行验证。

这个几个表单组件是:

组件名  形式
 日期  <input type=”date” >
 邮件  <input type=”email”>
 URL  <input type=”url”>
 搜索  <input type=”search”>   

示例:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5表单</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form action="https://example.com/upload.php" method="post">
            <label for="birthday">生日:</label>
            <input name="birthday" type="date" id="birthday"><br><br>
            <label for="email">邮箱:</label>
            <input name="email" type="email" id="email"><br><br>
            <label for="mysite">个人网站:</label>
            <input name="mysite" type="url" id="mysite"><br><br>      
            <label for="searchMysite">网站内搜索:</label>
            <input name="text" type="search" id="searchMysite"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>