HTML综合案例

最新推荐文章于 2024-03-11 11:01:03 发布

zyc0705

最新推荐文章于 2024-03-11 11:01:03 发布

阅读量138

点赞数 1

分类专栏： html 前端学习文章标签： html 前端

本文链接：https://blog.csdn.net/hmh520i/article/details/128386171

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端学习

10 篇文章 0 订阅

订阅专栏

表单综合案例1-相亲网站

1.源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别：
        <label><input type="radio" name="sex" checked>男</label>
        <label><input type="radio" name="sex">女</label>
        <br>
        <br>

        所在城市
        <select>
            <option>北京</option>
            <option selected>上海</option>
            <option>广州</option>
        </select>
        <br>
        <br>

        婚姻状况：
        <label><input type="radio" name="marry" checked>未婚</label>
        <label><input type="radio" name="marry">已婚</label>
        <label><input type="radio" name="marry">保密</label>
        <br>
        <br>

        喜欢的类型：
        <label><input type="checkbox" checked> 可爱</label>
        <label><input type="checkbox" checked> 性感</label>
        <label><input type="checkbox"> 御姐</label>

        <br>
        <br>

        个人介绍：<br>
        <textarea name="" id="" cols="60" rows="10"></textarea>
        <h3>我承诺</h3>
        <ul>
            <li>年满十八，单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>   

        <br>
        <br>

        <label><input type="checkbox"> 我同意所有条款</label>

        <br>
        <br>

        <input type="submit" value="免费注册">
        <button type="reset">重置</button>
    </form>
</body>
</html>

2.网页效果展示：

表单综合案例 2-个人信息

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>个人信息</h2>
    <form action="">
        <p>姓名:
            <input type="text"
                   placeholder="姓名">
        </p>
        <p>性别:
            <label><input type="radio"
                       name="sex"
                       checked>男</label>
            <label><input type="radio"
                       name="sex">女</label>
        </p>
        <p>爱好:
            <label><input type="checkbox"
                       checked>足球</label>
            <label><input type="checkbox">篮球</label>
            <label><input type="checkbox">羽毛球</label>
        </p>

        <p>现居：<select>
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">广州</option>
                <option value="">深圳</option>
            </select>
        </p>

        <p>个人简介：
            <br />
            <textarea cols="60"
                      rows="10"></textarea>
        </p>

        <input type="submit"
               value="提交">
        <button type="reset">重置</button>
    </form>
</body>
</html>

2.网页效果展示：