【HTML】HTML基础8.1(表单标签)

目录

效果

基础知识

标签

 代码


效果

基础知识

表单的组成元素
表单控件用户所填写的信息
提示信息提示用户需要填的信息
表单域包含表单元素的区域

 

标签

<form action="" method="">

</form>

<form>标签确定了一个表单域,我们的表单就是在这里面写的,其中

<form>标签的属性含义
action用户信息的存储地址
metho提交方式

等等

  • 这里我们只看基础部分,所以具体的地址和提交方式我们先不管

输入表单元素

<input type="" name="" value="">

 <input>标签的属性介绍

  • type=""
    text文本框
    hidden定义隐藏输入字段
    password密码框
    submit提交到服务器
    reset重置数据
    image图像形式的提交数据
    checkbox定义复选框(多选)
    radio定义单选框

name=""与value=""

两者都是给开发人员看的,不是所有的我们基础都要写的,不过在定义单选和复选时要给name赋同样的值,这样才能实现效果(理解:同一个名字表明是在同一个控件中做出选择)

 代码

与前面提到的标签一结合,就可以得到效果中所展示的啦~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>虚假的影迷注册网站</title>
	</head>
	<body>
		<h1>虚假的影迷注册网站</h1>
		<form action="" method="">
			<h3>请选择您的性别</h3><br />
			男<input type="radio" name="sex" />		女<input type="radio" name="sex" />		沃尔玛塑料袋<input type="radio" name="sex" />
			<h3>定义您的昵称</h3>
			<input type="text" name="" id="" value="" />
			<h3>定义您的密码</h3>
			<input type="password" name="" id="" value="" />
			<h3>点击一张您最爱的照片,生成个性化页面</h3>
			<input type="image" src="./img/5人。2.jpg" width="100" />
			<input type="image" src="img/5人酷背景.jpg" width="200" />
			<input type="image" src="img/你好.jpg" width="150" />
			<h3>请选择您在银河护卫队中喜欢的角色(可多选)</h3><br />
			星爵<input type="checkbox" name="juese" id="" value="" />	火箭<input type="checkbox" name="juese" id="" value="" />	
			  毁灭者德拉克斯<input type="checkbox" name="juese" id="" value="" />	格鲁特<input type="checkbox" name="juese" id="" value="" />
			其他<input type="text"/>
			
		</form>
	</body>
</html>

今天的分享到这里结束啦~希望能帮到您!<・)))><<

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Centos安装Miniconda

Centos安装Miniconda 一、前言二、安装1、下载Miniconda2、执行安装脚本3、加载环境变量使之生效&#xff1a;4、配置conda国内镜像&#xff1a; 三、conda常用命令1、创建环境2、查看所有环境3、删除一个环境4、激活指定环境5、退出当前环境 一、前言 需要在Centos中使用pytho…

吴恩达深度学习笔记:深度学习引言1.1-1.5

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第一周&#xff1a;深度学习引言(Introduction to Deep Learning)1.1 欢迎(Welcome)1.2 什么是神经网络&#xff1f;(What is a Neural Network)1.3 神经网络的监督学习(Supervised Learning …

《数字图像处理》读书笔记

本文笔记来自——数字图像处理_第三版_中_冈萨雷斯 1.使用数字图像处理领域的实例 如果光谱波段根据光子能量进行分组&#xff0c;则可得到下图的光谱&#xff0c;范围从伽马射线&#xff08;最高能量&#xff09;到无线电波&#xff08;最低能量&#xff09;。 1.1伽马射线成…

C++学习笔记:AVL树

AVL树 什么是AVL树?AVL树节点的定义AVL树的插入平衡因子调整旋转调整左旋转右旋转左右双旋右左双旋 AVL树完整代码实现 什么是AVL树? AVL是1962年,两位俄罗斯数学家G.M.Adelson-Velskii和E.M.Landis 为了解决如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找…

Mac M1:通过docker安装RocketMQ、RocketMQ-Dashboard

0. 引言 最近本地启动以前docker安装的rocketmq发现报错了&#xff0c;因为是从老mac迁移过来的&#xff0c;发现支持的芯片还是amd的&#xff0c;于是重新在docker下安装rocketmq&#xff0c;并记录下步骤&#xff0c;方便大家后续参考。 1. 步骤 1、先下载项目源码 git c…

景联文科技:专业提供高质量大语言模型训练数据

2024年&#xff0c;数字经济被再次写入政府工作报告中&#xff0c;报告指出要深化大数据、人工智能等研发应用&#xff0c;打造具有国际竞争力的数字产业集群。 大模型作为生成式人工智能的基础&#xff0c;日益成为国际科技竞争的焦点。人大代表杨剑宇指出&#xff0c;尽管我国…

货运物流小程序开发功能 发货运输更简单

随着互联网的快速发展&#xff0c;线上接单已经成为物流行业的主流趋势。货运物流接单小程序作为物流企业的得力助手&#xff0c;能够提高运输效率、降低成本、提升服务质量&#xff0c;成为物流行业的发展新方向。 1. 用户注册与登录功能&#xff1a;用户可以通过手机号、邮箱…

nodejs web服务器 -- 搭建开发环境

一、配置目录结构 1、使用npm生成package.json&#xff0c;我创建了一个nodejs_network 文件夹&#xff0c;cd到这个文件夹下&#xff0c;执行&#xff1a; npm init -y 其中-y的含义是yes的意思&#xff0c;在init的时候省去了敲回车的步骤&#xff0c;如此就生成了默认的pac…

基于Leatlet标注Geojson下载器实现

在上一篇文章中&#xff0c;我们学习了Leaflet的基础知识&#xff0c;包括如何创建地图、添加图层等。在本文中&#xff0c;我们将深入学习Leaflet中标注的创建和管理&#xff0c;包括如何添加标注、自定义标注图标、创建图层组、批量添加和删除标注、为标注添加属性和弹出框等…

二、TensorFlow结构分析(4)

TF数据流图图与TensorBoard会话张量Tensor变量OP高级API 目录 1、变量 2、高级API 1、变量 2、高级API

[嵌入式系统-37]:龙芯1B 开发学习套件 -6-协处理器CP0之CPU异常处理与外部中断控制器的中断处理

目录 一、MPIS CPU Core与32个异常exception 1.1 龙芯1B的MIPS CPU IP Core 1.2 MIP32指令系统 1.3 MIPS CPU寄存器 1.4 MIPS CPU的异常向量与异常向量号 1.5 龙芯异常exception与中断interrupt的区别 二、协议处理器CP0的中断控制与8个中断 2.1 CP0概述 2.2 协处理器…

Word文档一键转换成电子书,告别繁琐操作!

你是否曾经为了将Word文档转换为电子书而苦恼&#xff1f;手动复制粘贴、调整格式、排版等等繁琐的操作&#xff0c;不仅耗时费力&#xff0c;还容易出错。现在我教你只需轻轻一点&#xff0c;即可将Word文档轻松转换为电子书&#xff0c;无需任何手动操作 一、Word转换电子书步…

基于React低代码平台开发:直击最新应用构建

文章目录 前言一、React与低代码平台的结合优势二、基于React的低代码平台开发挑战三、基于React的低代码平台开发实践四、未来展望《低代码平台开发实践&#xff1a;基于React》编辑推荐内容简介作者简介目录前言为什么要写这本书读者对象如何阅读本书 前言 随着数字化转型的…

Word论文格式怎么设置 Word论文查重功能在哪里 论文格式要求及字体大小 论文查重怎么查 WPS论文查重准确吗

Word文档是由Microsoft Word处理软件创建和编辑的文档。Word文档通常用于创建各种类型的文档&#xff0c;如信函、报告、简历、论文等。本篇文章将为大家介绍Word论文格式怎么设置以及Word论文查重功能在哪里。 一、Word论文格式怎么设置 一个好的论文格式&#xff0c;是论文…

【框架设计】MVC、MVP、MVVM对比图

1. MVC&#xff08;Model-View-Controller&#xff09; 2. MVP&#xff08;Model-View-Presenter&#xff09; 3. MVVM&#xff08;Model-View-ViewModel&#xff09;

ai数字人虚拟直播:AI大模型带给你不一样的体验

AI数字人虚拟直播&#xff0c;这一新兴的科技形式&#xff0c;正逐渐融入人们的生活之中。通过AI大模型的技术支持&#xff0c;数字人可以实现高度仿真的互动体验&#xff0c;让观众感受到前所未有的沉浸式乐趣。 数字人虚拟直播的魅力在于其超越了传统直播形式的局限性&#…

Python爬虫——Scrapy-1

目录 简介 安装 基本使用 1. 创建爬虫的项目 2. 创建爬虫文件 3. 运行爬虫代码 scrapy项目组成 scrapy工作原理 ​编辑 58同城 scrapy架构组成 汽车之家 总结 简介 Scrapy 是一个基于 Python 的开源网络爬虫框架&#xff0c;它可以帮助开发者快速、高效地构…

数据结构从入门到精通——栈

栈 前言一、栈1.1栈的概念及结构1.2栈的实现1.3栈的面试题 二、栈的具体实现代码栈的初始化栈的销毁入栈出栈返回栈顶元素返回栈中的元素个数检测是否为空Stack.hStack.ctest.c 前言 栈&#xff0c;作为一种后进先出&#xff08;LIFO&#xff09;的数据结构&#xff0c;在计算…

Windows系统搭建it-tools工具箱并结合内网穿透实现公网远程访问

文章目录 1. 使用Docker本地部署it-tools2. 本地访问it-tools3. 安装cpolar内网穿透4. 固定it-tools公网地址 本篇文章将介绍如何在Windows上使用Docker本地部署IT- Tools&#xff0c;并且同样可以结合cpolar实现公网访问。 在前一篇文章中我们讲解了如何在Linux中使用Docker搭…

FPGA FIFO 读取模式

FPGA FIFO 读取模式分两种&#xff1a; Normal Mode: In normal mode, the “rdreq” signal serves as the read request or read enable. When this signal goes high, the data output provides the first data from the FIFO.Essentially, in normal mode, data is availa…