前端入门：HTML（表单案例）

已于 2024-03-30 21:22:14 修改
阅读量648 收藏 18
点赞数 24
分类专栏： HTML 文章标签： 前端 html
于 2024-03-30 21:06:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yscy0801/article/details/137183160
版权
本文介绍了如何使用HTML和相关表单元素创建一个社区疫情流调信息表单，包括姓名、联系方式、健康状况、旅行史、疫苗接种情况等字段，以及上传身份证和个人意见的选项，最后展示如何将数据提交到后端服务器。
摘要由CSDN通过智能技术生成

          我们运用前面学习的表单相关知识，可以做出一个完整的表单，在这个表单制作过程中我们可以对前面学习过的知识进行一个很好的复习，下面让我们一起来看看吧~~

案例：

源代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>社区疫情流调信息表</title>

</head>

<body>

    <h1 align='center'>社区疫情流调信息表</h1>

    <p>&emsp;&emsp;请大家做好个人防护，如去过风险地区，请及时向社区和社团报备；如您的身体出现异常（出现新冠病毒典型症状，如发热，咳嗽等），

        请及时上报异常情况，并按照通知，前往隔离系统进行核酸检测，在去核酸检测的路上请带好口罩，做好个人防护，等待检测结果期间请勿前往人多汇集的地方。

    </p>

    <form action="后端小伙伴提供的服务器地址" target="_self">

        <fieldset>

            <!-- 边框的标题 -->

            <legend>基本信息</legend>

            <h4>1.您的姓名</h4>

            <input type="text">

            <h4>2.您的手机号</h4>

            <input type="text" value="155*****000" readonly>

            <h4>3.您的性别</h4>

            <input type="radio" name="gender">男

            <input type="radio" name="gender">女

            <input type="radio" name="gender" disabled>保密

            <h4>4.家庭住址</h4>

            <select name="" id="">

                <option value="" selected>===哪一个省/直辖市===</option>

                <option value="">河南省</option>

                <option value="">北京市</option>

                <option value="">上海市</option>

                <option value="">安徽省</option>

                <option value="">南京市</option>

                <option value="">浙江省</option>

                <option value="">江苏省</option>

                <option value="">湖南省</option>

                <option value="">西藏</option>

            </select>

            <select name="">

                <option value="" selected>===市区===</option>

                <option value="">洛阳市</option>

                <option value="">郑州市</option>

                <option value="">开封市</option>

                <option value="">平顶山市</option>

                <option value="">安阳市</option>

                <option value="">漯河市</option>

                <option value="">三门峡市</option>

                <option value="">南阳市</option>

                <option value="">商丘市</option>

            </select>

            <select name="">

                <option value="" selected>===县===</option>

                <option value="">新安县</option>

                <option value="">宜阳县</option>

                <option value="">伊川县</option>

                <option value="">洛宁县</option>

                <option value="">嵩县</option>

                <option value="">栾川县</option>

                <option value="">汝阳县</option>

                <option value="">偃师市</option>

                <option value="">吉利区</option>

            </select>

            <select name="">

                <option value="" selected>===乡===</option>

                <option value="">安乐路街道办事处</option>

                <option value="">关林街道办事处</option>

                <option value="">太康东路街道办事处</option>

                <option value="">翠云路街道办事处</option>

                <option value="">李楼镇</option>

                <option value="">寇店镇</option>

                <option value="">诸葛镇</option>

                <option value="">古城街道办事处</option>

            </select>

            <br>

            <br>

            <textarea cols="65" rows="4">请输入详细地址</textarea>

            <h4>5.您现在的身体状况</h4>

            <input type="checkbox">健康 <br>

            <input type="checkbox">发热 <br>

            <input type="checkbox">干咳 <br>

            <input type="checkbox">乏力 <br>

            <input type="checkbox">呼吸困难 <br>

            <input type="checkbox">咽痛 <br>

            <input type="checkbox">胸闷 <br>

            <input type="checkbox">肌肉酸痛/关节痛 <br>

            <input type="checkbox">呕吐 <br>

            <input type="checkbox">腹泻 <br>

            <input type="checkbox">味觉异常 <br>

            <input type="checkbox">嗅觉异常 <br>

            <h4>6.您的健康码颜色目前是</h4>

            <input type="radio" name="color">绿色

            <input type="radio" name="color">黄色

            <input type="radio" name="color">红色

            <h4>7.您是否在14天内有过中高风险地区居住史，或与确诊人员有过较为密切的接触？</h4>

            <input type="radio" name="close">是

            <input type="radio" name="close">否

            <h4>8.疫苗接种情况</h4>

            <input type="radio" name="vaccines">已接种一针

            <input type="radio" name="vaccines">已接种二针

            <input type="radio" name="vaccines">已接种三针

        </fieldset>

    </form>

    <br>

    <br>

        <fieldset>

            <legend>保密信息</legend>

            <h4>1.身份证信息</h4>

            正面：

            <input type="file">

            <br>

            反面：

            <input type="file">

            <h4>2.学历信息(最高)</h4>

            <select>

                <option value="">研究生</option>

                <option value="">本科</option>

                <option value="">大专</option>

                <option value="">高中</option>

                <option value="">高中以下</option>

            </select>

            <h4>3.是否服兵役</h4>

            <input type="radio" name="ismilitary" id="yes">

            <label for="yes">是</label>

            <input type="radio" name="ismilitary" id="no">

            <label for="no">否</label>

            <h4>4.个人意见</h4>

            <textarea cols="60" rows="5"></textarea>

        </fieldset>

        <br>

        <br>

        <input type="submit" value="上传信息">

        <input type="reset" value="清空信息">

        <input type="image" src="E:\学习前端\four.png">

</body>

</html>

今天天气有点好~
关注
专栏目录
HTML表单实例
weixin_30872789的博客
12-17 214
1 HTML表单 2 3 表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册）， 4 5 首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入， 6 7 具体实现及注释可参照以下伪代码： 8 9 <!-- form...
html的form表单实例介绍
12-23
html的form表单中button等实例介绍
html实例，实现表单
aigo_2021的博客
03-29 7312
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表单示例
Useless_csdn的博客
01-11 3133
表单是HTML页面中负责数据采集功能的部件。它往往由三部分组成，即表单标签、表单域、表单按钮。 表单标签：用于表面表单的范围，位于表单标签中的元素将被提交 语法：&lt;form&gt;&lt;form&gt; 属性：Method,Enctype,action 表单域：包括文本框，密码框等多种类型 语法：&lt;input……/&gt; 属性：type,name,value 种类：文...
HTML-form表单示例
爱在浪漫中舞蹈
06-19 482
form-128 username password email </div> </div> <div> <label>ganeder</label> ...
HTML（之表单的）案例
ChengMeng11的博客
03-14 1159
1、表单的基本用法： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <f...
前端入门：HTML案例（表格、按钮、下拉款、文本域等）
最新发布
mingangel的博客
09-19 521
我选用的软件是：Visual Studio CODE，这个软件在前端开发中十分常用，且提供了很大的便利。当然这里记得在其中添加上name，因为这样才能实现分类，且以后提交到后台，数据才能更加清晰明了。然后就是整个大框架，我用的是表单元素，然后也在表单的最后一行，使用了无序列表。运用的或者都是可以的，分好表格的框架之后，则可以在单元格内填充自己需要的元素。当然也可以用记事本开发，记得把后缀名改成.html。，当然也有单标签，等。
html5 与java后台交互,入门：HTML表单与Java 后台交互(复选框提交)
weixin_35725821的博客
06-21 4620
仅仅给出部分关键代码：HTML form code:清输入用户名：请输入用户密码：请选择你的课程足球 篮球乒乓球排球球JavaFormTest.java 处理程序doPost 部分：protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOExc...
初识前端开发：HTML基础入门
本章将介绍前端开发的基本概念，包括前端开发的定义、在Web开发中的作用以及前端开发技术栈的概述。让我们一起来深入了解前端开发的世界。 # 2. HTML基础概念 HTML是一种标记语言，被用来描述在网页上如何显示内容...
前端开发入门：HTML、CSS和JavaScript
学习HTML是前端开发的第一步，下面将介绍HTML的基础知识，帮助你快速入门。 ### 1. HTML是什么 HTML全称为超文本标记语言（HyperText Markup Language），是网页制作的标准语言。通过HTML标记，可以将文字、图像、...
html表单实例：用户反馈表单页面代码|从零开始：用HTML和CSS构建漂亮的用户反馈表单（含详细代码示例）|新手前端必看|初学者指南|新手友好|简洁实用|快速入门
南北极之间
06-10 503
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
HTML---表单案例
sumuqi的博客
03-14 415
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <form action="" m...
HTML实例之表单
qq_43131852的博客
09-25 325
参考https://www.w3school.com.cn/html/index.asp 文本域(Text fields) <html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastnam...
html表单应用的简单例子
米小豆的博客
06-10 757
比较简单，直接上 代码 昵称 密码 确认密码 男 第二种 <input name="sextype" type="radio">女 --> 性别男 <input name="sextype"
HTML表单
dongdaxiaopenyou的博客
02-19 6859
一、form标签两个最重要的属性：action 和 methodinput的type类型有很多，这里有text和password两种button的type类型默认为submit，另外还有button, reset类型=================================================================二、GET 和 POST的区别：1.GET就是从服务器...
html综合表单例子
行善之人必有余庆
05-25 2174
提交表单 输入姓名: 选择你最喜欢的颜色: 红 绿 蓝 黄 请问你性别: 男 女 喜欢的事情: 看书 上网 睡觉 我要留言:
html表格表单
哇塞
06-12 2342
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <table border="1" width="500" height="200" cellspacing="...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值