WEB中表单案例

news2025/2/23 1:01:48

一、题目：书写如下图的web前端

 二、解题代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单案例</title>
    <style>
        div {
            font:900 15px "黑体"
        }
        #datePicker {
  padding: 10px;
  font-size: 16px;
}
    </style>
</head>
<body>
    <div>
        青春不常在,抓紧谈恋爱
    </div>
    性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" value="nan" checked ><img src="./img/nan.jpg" height="10px" border="2">男
        <input type="radio" name="gender" value="nv"><img src="./img/nv.jpg" height="10px" border="2">女<br/>
    <form>
        生日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <select id="year" name="year">
          <option value="" disabled selected>请选择年</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <!-- 在这里添加更多年份选项 -->
        </select>
        <select id="month" name="month">
          <option value="" disabled selected>请选择月</option>
          <option value="1">1月</option>
          <option value="2">2月</option>
          <!-- 在这里添加更多月份选项 -->
        </select>
        <select id="day" name="day">
          <option value="" disabled selected>请选择日</option>
          <option value="1">1日</option>
          <option value="2">2日</option>
          <!-- 在这里添加更多日期选项 -->
        </select>
      </form>
      <form>
        所在地区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="北京思密达">
      </form>   
      <form>    
      婚姻状况&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" name="gender" value="weihun" checked>未婚
        <input type="radio" name="gender" value="yihun">已婚
        <input type="radio" name="gender" value="lihun">离婚<br/>
    </form> 
        <form>
            学历&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="幼儿园"><br/>
            喜欢的类型
            <input type="checkbox" name="leixing">妩媚的
            <input type="checkbox" name="leixing">可爱的
            <input type="checkbox" name="leixing" >小鲜肉
            <input type="checkbox" name="leixing" >老腊肉
            <input type="checkbox" name="leixing" >都喜欢<br/>
        </form>
        <form>
        自我介绍&nbsp;&nbsp;&nbsp;&nbsp;
            <textarea cols="20" rows="2" maxlength="100">自我介绍</textarea><br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="免费注册"></br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="tongyi" checked>我同意注册条款和会员加入标准<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.xianoupeng.com/" target="_blank">我是会员立即登录</a><br/>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h2>我承诺</h2>
            <ul type="">
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>


        </form>



      
</body>
</html>

三、结果截图 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/729601.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Webstorm+Nodejs+webpack+vue-cli+Git搭建vue环境

Webstorm+Nodejs+webpack+vue-cli+Git搭建vue环境

此笔记归纳整理webstorm搭建vue项目&#xff0c;仅作记录使用。 一、安装Webstorm1、双击运行安装包2、设置安装路径3、按需选择4、安装5、运行6、激活 二、安装node.js1、双击运行安装包2、设置安装路径3、验证安装4、修改全局模块下载路径5、更换npm源6、全局安装基于淘宝源…
阅读更多...
C++模拟实现string类

C++模拟实现string类

目录 前言&#xff1a;什么是string类&#xff1f;string类的模拟实现 一、四个默认成员函数1.1 构造函数1.2 拷贝构造函数1.3 赋值重载函数1.4 析构函数 二、迭代器三、c_str()函数四、size和capacity函数五、reserve函数六、resize函数七、push_back函数七、append函数八、fi…
阅读更多...
C#基础学习_方法的重载

C#基础学习_方法的重载

C#基础学习_方法的重载 在类中定义方法的一般方式（不使用重载时）： public int Add(int a, int b){return a + b;}
阅读更多...
mysql解决varchar字段内容不区分大小写问题

mysql解决varchar字段内容不区分大小写问题

测试内容: 解决方案: 方案一:将查询条件用binary()括起来 select * from sys_menu where binary permission_str SYSTEM 方案二:将排序规则改为utf8_xxx_cs(推荐) utf8_xxx_ci不区分大小写&#xff0c;ci为case insensitive的缩写&#xff0c;即大小写不敏感。 utf8_xxx_c…
阅读更多...
Python学习笔记（十九）————json相关

Python学习笔记（十九）————json相关

目录 &#xff08;1&#xff09;什么是json &#xff08;2&#xff09; json有什么用 &#xff08;3&#xff09; json格式数据转化 &#xff08;4&#xff09;Python数据和Json数据的相互转化 &#xff08;1&#xff09;什么是json JSON 是一种轻量级的数据交互格式。可以按照…
阅读更多...
linux下nmap的使用

linux下nmap的使用

linux下nmap的使用 文章目录 centos下nmap的使用安装使用1234567 centos下nmap的使用 安装 yum install nmap使用 1 nmap your-ip&#xff08;域名&#xff09;开放了22、80、111、443端口 2 nmap -p 端口 IP(域名)&#xff0c;判断ip是否开放指定端口3 默认脚本扫描&am…
阅读更多...
JavaWeb 速通HTML

JavaWeb 速通HTML

目录 一、拾枝杂谈 1.网页组成 : 1 结构 2 表现 3 行为 2.HTML入门 : 1 基本介绍 2.基本结构 : 3.HTML标签 : 1 基本说明 2 注意事项 二、常用标签汇总及演示 1.font标签 : 1 定义 2 演示 2.字符实体 : 1 定义 2 演示 3.标题标签 : 1 定义 2 演示 4. 超链接标签 : 1…
阅读更多...
清华青年AI自强作业hw6：基于ResNet实现IMAGENET分类任务

清华青年AI自强作业hw6：基于ResNet实现IMAGENET分类任务

清华青年AI自强作业hw6&#xff1a;基于ResNet实现IMAGENET分类任务 简述作业实现相关链接 一起学AI系列博客&#xff1a;目录索引 简述 hw6作业为基于ResNet模型&#xff0c;并利用VGG标准模块和GoogleNet中的inception模块对IMAGENET数据集进行20类分类。模型输入图像尺寸为2…
阅读更多...
特征选择算法 | Matlab实现基于互信息特征选择算法的回归数据特征选择 MI

特征选择算法 | Matlab实现基于互信息特征选择算法的回归数据特征选择 MI

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 特征选择算法 | Matlab实现基于互信息特征选择算法的回归数据特征选择 MI 部分源码 %--------------------
阅读更多...
OpenCV红色图像上用绿色画了两条线

OpenCV红色图像上用绿色画了两条线

// 红色图像上 画上蓝色的线 // 在图中画一条直线 函数原型 // 函数作用 // 给定一个图像img，连接点pt1和pt2的坐标，在图中画一条直线，color表明线的颜色cv.line() // 其中需要注意的是，点坐标(x, y)中，x代表图片的列，y代表图片的行 // CvPoint pt1, //直线起点 // CvPoi…
阅读更多...
Android - AIDL

Android - AIDL

一、概念 二、使用 2.1 Server 端 2.1.1 创建 .aidl 文件 Module右键→New→AIDL→AIDL File&#xff08;如果不可选&#xff0c;在build.gradle的buildFeatures节点添加aidl true&#xff09;。 在创建的接口中定义抽象方法。 interface IDemoAidlInterface {//自己的业…
阅读更多...
MySQL库表的简单操作

MySQL库表的简单操作

1.创建数据Market&#xff0c;在数据库中创建表customers&#xff0c;表结构如图 (1)创建数据库Market create database Market&#xff1b; (2)创建数据表customers&#xff0c;在c_num字段添加主键约束&#xff0c;c_birth字段上添加非空约束 create table customers&#…
阅读更多...
IDEA 导入多模块项目并设置运行

IDEA 导入多模块项目并设置运行

1、导入多模块项目 导入的步骤点击左上角File->New->Module from Existing Sources&#xff0c;最后点击选择项目的pom文件即可 2、设置模块 如果pom.xml文件是灰色并且有横杠&#xff0c;则需要这样设置&#xff1a; 把√去掉。 项目结构如图所示&#xff1a; 本项…
阅读更多...
Linux下如何使用git？如何搭建自己的库？

Linux下如何使用git？如何搭建自己的库？

前言&#xff1a; 本文主要介绍如何在 Linux 中使用 git 、gitee 账号注册、如何新建远程仓库与本地仓库 以及 git 的常用指令。 一.安装git 切换至 root 用户身份&#xff0c;输入指令&#xff1a; yum install -y git使用 sudo 指令&#xff1b; sudo yum install -y git二…
阅读更多...
《Redis 核心技术与实战》课程学习笔记（四）

《Redis 核心技术与实战》课程学习笔记（四）

Redis 持久化机制 AOF日志&#xff1a;宕机了&#xff0c;Redis 如何避免数据丢失&#xff1f; 一旦服务器宕机&#xff0c;内存中的数据将全部丢失。目前&#xff0c;Redis 的持久化主要有两大机制&#xff0c;即 AOF 日志和 RDB 快照。 AOF 日志是如何实现的&#xff1f; …
阅读更多...
【架构设计】架构知识体系

【架构设计】架构知识体系

文章目录 1、什么是架构和架构本质2、架构分类2.1、业务架构&#xff08;俯视架构&#xff09;2.2、应用架构&#xff08;剖面架构&#xff0c;也叫逻辑架构图&#xff09;2.2.1、职责划分: 明确应用&#xff08;各个逻辑模块或者子系统&#xff09;边界2.2.2、职责之间的协作&…
阅读更多...
[TPAMI 2022] 神经网络元学习：综述

[TPAMI 2022] 神经网络元学习：综述

Meta-Learning in Neural Networks: A Survey | IEEE Journals & Magazine | IEEE Xplore Meta-Learning in Neural Networks: A Survey 摘要&#xff1a; 近年来&#xff0c;元学习&#xff08;或“学会学习”&#xff09;领域的兴趣急剧上升。与使用固定学习算法从头开…
阅读更多...
TensorFlow： mode.save()报错 non-trackable object: (None, None)

TensorFlow： mode.save()报错 non-trackable object: (None, None)

问题描述 环境&#xff1a;tensorflow2.2.0 执行model.save(), 报错 ...non-trackable object: (None, None)... 解决办法 搞了半天没有找到好的办法&#xff0c;只能通过升级搞定 pip uninstall tensorflow pip install tensorflow2.6.0 pip install --upgrade keras2.6…
阅读更多...
机器学习算法总结

机器学习算法总结

机器学习算法 参考博客&#xff1a;https://blog.csdn.net/lemonbit/article/details/125775595#:~:text干货| 机器学习模型与算法最全分类汇总&#xff01; 1 线性回归、逻辑回归、Lasso回归、Ridge回归、线性判别分析 2 K近邻、决策树、感知机、神经网络、支持向量机 3,AdaBo…
阅读更多...
用for循环打印图形

用for循环打印图形

目录 一、打印矩形 二、打印直角三角形 1.直角三角形 2.打印九九乘法表 三、打印等腰三角形 四、打印平行四边形 五、打印菱形 六、打印两个直角三角形 1.打印两个直角三角形 2.打印倒着的两个直角三角形 七、打印“蝴蝶” 一、打印矩形 //打印矩形for (int i 0; i < a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023