【学习笔记5】HTML案例1（表单）

最新推荐文章于 2022-03-29 22:10:09 发布
最新推荐文章于 2022-03-29 22:10:09 发布
阅读量71 收藏
点赞数
分类专栏： HTML 学习 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60525480/article/details/119331973
版权
学习 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
HTML
12 篇文章 0 订阅
订阅专栏

代码：

<!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>

    <h4>青春不常在</h4>

    <table>

        <tr>

            <td>性别：</td>

            <td><input type="radio" name="sex" checked="checked"><img src="#">男 

                <input type="radio" name="sex"><img src="#">女</td>

        </tr>

        <tr>

            <td>生日：</td>

            <td><select>

                <option selected="selected">请选择年份</option>

                <option>1999</option><option>2000</option><option>2001</option>

                <option>2002</option><option>2003</option>

            </select>

            <select>

                <option selected="selected">请选择月份</option>

                <option>1</option><option>2</option><option>3</option>

                <option>4</option><option>5</option><option>6</option>

                <option>7</option><option>8</option><option>9</option>

                <option>10</option><option>11</option><option>12</option>

            </select>

            <select>

                <option selected="selected">请选择日期</option>

                <option>1</option><option>2</option><option>3</option>

                <option>4</option><option>5</option><option>6</option>

                <option>7</option><option>8</option><option>9</option>

                <option>10</option><option>11</option><option>12</option>

            </select>

            </td>

        </tr>

        <tr>

            <td>所在地区：</td>

            <td><input type="text" value="请输入地址"></td>

        </tr>

        <tr>

            <td>婚姻状况：</td>

            <td><input type="radio" name="marry">已婚

                <input type="radio" name="marry">未婚

                <input type="radio" name="marry">离婚            

            </td>

        </tr>

        <tr>

            <td>学历：</td>

            <td><input type="text"></td>

        </tr>

        <tr>

            <td>喜欢的类型：</td>

        <td><input type="checkbox" name="lei">优雅的

            <input type="checkbox" name="lei">可爱的

            <input type="checkbox" name="lei">漂亮的

            <input type="checkbox" name="lei">妩媚的

            </td>

        </tr>

        <tr>

            <td>自我介绍：</td>

            <td><textarea></textarea></td>

        </tr>

        <tr>

            <td ></td>

            <td><input type="button" value="免费注册"></td>

        </tr>

        <tr>

            <td ></td>

            <td><input type="checkbox" checked="checked">我同意注册条款</td>

        </tr>

        <tr>

            <td ></td>

            <td><a href="#">我是会员，立即登录</td>

        </tr>

        <tr>

            <td></td>

            <td><h3>我承诺</h3>

                <ul>

                    <li>年满18岁</li>

                    <li>态度端正</li>

                    <li>待人真诚</li>

                </ul></td>

        </tr>

    </table>

</body>

</html>

结果：                         

 

 

 

m0_1229
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML---表单案例
sumuqi的博客
03-14 403
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <form action="" m...
HTML（之表单的）案例
ChengMeng11的博客
03-14 1130
1、表单的基本用法： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <f...
html 表单实例
LIN的博客
09-07 214
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html表单</title> </head> <body> <div align="center" > 表单 <form action=...
HTML表单示例
Useless_csdn的博客
01-11 3116
表单是HTML页面中负责数据采集功能的部件。它往往由三部分组成，即表单标签、表单域、表单按钮。 表单标签：用于表面表单的范围，位于表单标签中的元素将被提交 语法：&lt;form&gt;&lt;form&gt; 属性：Method,Enctype,action 表单域：包括文本框，密码框等多种类型 语法：&lt;input……/&gt; 属性：type,name,value 种类：文...
HTML实例之表单
qq_43131852的博客
09-25 316
参考https://www.w3school.com.cn/html/index.asp 文本域(Text fields) <html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastnam...
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
学习HTML5过程笔记
最新发布
03-19
本笔记涵盖了HTML5的基础知识点，包括HTML的基本概念、标签的使用、浏览器的渲染引擎、Web标准、HTML标签的构成、页面结构、列表标签、表格标签、表单标签、选择器、样式、布局案例等，为学习HTML5提供了系统的知识...
h5前端学习笔记
03-21
5. **H5学习笔记.md**：这是一个Markdown格式的文件，详细记录了HTML5的学习历程，可能包括了标准规范、语法、实践案例等。 6. **canvas讲义.md**：Canvas是HTML5中的绘图元素，这个文件可能详细介绍了如何用...
H5+CSS学习资料+笔记+项目资料
07-13
可能是HTML5和CSS3的学习笔记，包含了作者在学习过程中的总结和心得，对于理解和记忆相关知识非常有帮助。 总的来说，这个资料包是一个全面的前端学习资源，通过它你可以深入理解HTML5和CSS3的核心概念，同时通过...
PHP学习笔记.rar
08-31
【PHP学习笔记】是作者四个月学习PHP过程中积累的个人笔记，主要涵盖了HTML基础、CSS基础以及PHP基础等核心内容。这些笔记对于初学者来说是非常有价值的资源，因为它们以小案例的形式展示了各种知识点，便于理解和...
html的form表单实例介绍
12-23
html的form表单中button等实例介绍
表单美化案例
07-06
表单美化案例：单选框、复选框、文本框、下拉列表美化！
HTML 使用表单标签实现注册页面的实例代码
12-14
案例说明：　　　   　　　　- 使用表格实现页面效果  　　　　- 超链接不想要有效果，使用href="#" 　　　　- 如果表格里面的单元格没有内容，使用空格作为占位符   　　　　- 使用图片标签提交表单 <input type="image" src="图片的路径"/>   完整代码：   <html> <head> <title>World</title> </head> <body> <form action="01-hello.html" method="post"> <h3 align=
练习三：HTML表单案例
Mmaoi的博客
07-23 178
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table align="center"> <tr> <td> ...
html表单实现小案例
异想实验室|Arduion|ESP8266|Micro Python|
02-22 151
html表单实现方法
HTML5 表单小案例
Bowen的博客
02-09 896
最近在复习HTML5，手写了一个表单案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 表单小案例</title> <!--引入JQuery--> <script src="plugin/jque...
html实例，实现表单
aigo_2021的博客
03-29 6900
1.使用HTML完成下列功能 <!doctype html> <html> <head> <!-- <meta charset="GBK">--> </head> <body> <table width="60%" border="3" align="center" bgcolor="#F0F8FF" borderColor="blue"> <tr> &l.
html制作表单网页案例
weixin_30437337的博客
01-31 1012
html的表格制作案例 有关html <div id="table-info"> <h2>LIFAair LA500参数表 </h2> <table> <tr> <td width="40%">测...
【实用】HTML的简单示例（表单篇）
Mankey_24的博客
10-09 6114
效果如下： 代码内容： <html> <head> <title>增加管理员</title> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <table> <thead>&
PHP学习笔记：从HTML到CSS的全面梳理
"这是一份详细的PHP学习笔记，包含了HTML、CSS、JavaScript和PHP的基础知识。笔记以天为单位划分，每天的学习内容涵盖了一系列相关主题，旨在帮助学习者系统地掌握Web开发的基本技能。" 在这些笔记中，首先介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值