返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

css制作表单效果

2020-04-27 文章标签: css 表单 浏览次数:

我们继续讲解css教程,今天介绍的是制作一个表单效果,在网站留言,收集信息的时候经常用到

HTML5教程

我们看看效果图

css设计表单结构

是不是经常看到呢,在网站注册会员的时候。我们看看css代码怎么写

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="contact" action="index.html" method="get">
    <fieldset>
        <legend>个人信息</legend>
        <ol>
            <li>
                <label for="name">姓名</label>
                <input class="required" type="text" name="name" id="name">
                <span>(必填)</span></li>
            <li>
                <label for="email">邮箱</label>
                <input class="required" type="text" name="email" id="email">
                <span>(必填)</span></li>
            <li>如何保持联系? (至少选择一种)
                <ul>
                    <li>
                        <label>
                            <input type="checkbox" name="by-contact-type" value="Email" id="by-email">
                            Email</label>
                        <input class="conditional" type="text" name="email" id="email">
                        <span>(当勾选前面复选框后,则必须填写Email信息)</span></li>
                    <li>
                        <label>
                            <input type="checkbox" name="by-contact-type" value="Phone" id="by-phone">
                            电话</label>
                        <input class="conditional" type="text" name="phone" id="phone">
                        <span>(当勾选前面复选框后,则必须填写电话号码)</span></li>
                    <li>
                        <label>
                            <input type="checkbox" name="by-contact-type" value="QQ" id="by-qq">
                            QQ</label>
                        <input class="conditional" type="text" name="qq" id="qq">
                        <span>(当勾选前面复选框后,则必须填写QQ号码)</span></li>
                </ul>
            </li>
        </ol>
    </fieldset>
</form>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。