前端HTML入门之表单demo练习实例 --源码

最新推荐文章于 2024-04-28 13:46:58 发布

临夏_

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量936

点赞数 1

分类专栏：前端之相关小demo案例文章标签：前端 html

本文链接：https://blog.csdn.net/faith_girl/article/details/121281480

版权

前端之相关小demo案例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

demo-表单

在这里插入图片描述

<!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>
    <form>
        <h5>青春不常在，抓紧谈恋爱</h5>
        <hr>
        <p>昵称：<input type="textarea"></input></p>
        <p>性别：<input type="radio" name="sex">男</input><input type="radio" name="sex">女 </input></p>
        <p>
            所在城市：
            <select >
            <option >深圳</option>
            <option >上海</option>
            <option >北京</option>
            <option >青岛</option>
            <option >河北</option>
            <option >湖南</option>
            </select>
        </p>
        <p>性别：<input type="radio" name="hun">未婚</input><input type="radio" name="hun">已婚</input><input type="radio" name="hun">保密</input></p>
    <p>
        喜欢的类型：<input type="checkbox"/>可爱
        <input type="checkbox"/>萝莉
        <input type="checkbox"/>性感
        <input type="checkbox"/>小咸肉
        <input type="checkbox"/>小鲜肉
    </p>
    <p>
        个人介绍:<br/>
        <textarea  rows="10" cols="50">文本</textarea>
    </p>
    <h4>我承诺</h4>
    <ul>
        <li>年满18岁，单身</li>
        <li>想着严肃的态度</li>
        <li>真诚寻找另一半</li>
    </ul>
    <p><input type="checkbox">我同意所有条款</p>
    <p>
        <button>免费注册</button> 
        <input type="reset"></input>
</from>
</body>
</html>

我使用<p>标签包裹达到换行的目的但是完全可以使用<br/>
因为老觉得<p>是行级元素（不独占一行）就用实际练习记忆一下
注意：<p>是块级元素

思考题
（因为个人感觉表格不太常用就没有敲大家可以试着敲下很简单）
请试着写出下面表格页面
在这里插入图片描述
解析

相关知识点

https://editor.csdn.net/md/?articleId=121262606

临夏_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端HTML入门之表单demo练习实例 --源码

demo-表单<!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"> <tit
复制链接

扫一扫