html5表单实例

最新推荐文章于 2025-05-21 14:03:42 发布

原创最新推荐文章于 2025-05-21 14:03:42 发布 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #表单

本文将展示HTML5中表单的使用实例，通过实际效果来解析如何在网页中创建和设计交互式的表单，帮助开发者更好地理解和应用HTML5的新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5-表单实例</title>
    <!--CSS引入式-->
    <link rel="stylesheet" href="">
    <!--CSS内嵌式-->
    <style>
    </style>
</head>
<body>
     <h3>HTML5-表单实例</h3>

        <form action="./1.php" method="get" style="width:300px;">
        <!--行内CSS样式-->
            <fieldset style="border: 1px solid red;">
                <legend>登陆信息</legend>
                姓名：<input type="text" list="nameinfo" name="username" />
                <br />
                <datalist id="nameinfo">
                    <option value="zhangsan"/>
                    <option value="lisi"/>
                    <option value="wangermazi"/>
                    <option value="wangmazi"/>
                    <option value="goudan"/>
                </datalist>
            </fieldset>
            <fieldset>
                <legend>详细信息</legend>
                地址:<input type="text" name="address"/><br/>
                电话:<input type="text" name="phone" /><br/>
                邮箱:<input type="text" name="email" /><br />
                分类:
                    <select type="typeid">
                        <optgroup label="服装">
                            <option>男装</option>
                            <option>女装</option>
                            <option>孕妇装</option>
                            <option>亲子装</option>
                        </optgroup>

                        <optgroup label="食品">
                            <option>烟酒</option>
                            <option>茶叶</option>
                            <option>饮料</option>
                        </optgroup>
                    </select>
            </fieldset>

            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form> 
            <fieldset>
            <legend>登陆信息</legend>   
            姓名：<input type="text" list="nameinfo" name="username" />
            </fieldset>
</body>
</html>

效果图如下：
这里写图片描述