HTML 浮动窗口 表单及表单控件 标签汇总 线包字效果

2024-09-05 19:38

本文主要是介绍HTML 浮动窗口 表单及表单控件 标签汇总 线包字效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


<html>
<head>
<title>第五讲代码</title>
</head><body>
<!--有时我们需要在一个含有<body>的页面嵌入另外一个页面,形成画中画的效果,这时就需要iframe元素(浮动窗口)-->
***************************************************************************************************************************************************
<br><b>1、浮动窗口:</b><br><!--iframe 用于在网页内显示网页-->
<iframe src="http://www.baidu.com" width="400px" height="300px"></iframe><!--name 对浮动窗口进行命名,以便进行替换-->
<iframe src="http://www.haosou.com/" width="400px" height="300px" name="asd"></iframe><br>友情链接:<br>
<a href="http://www.taobao.com/" target="asd">淘宝网</a><br><a href="http://www.haosou.com/" target="asd">返回</a>
<br><br>
****************************************************************************************************************************************************
<!--表单元素(form):
在网页中,我们经常需要把一些数据提交给服务器处理,比如注册用户,发帖等,这样就需要使用到表单元素。
常见的表单元素类型有:
Text:文字输入框
Password:密码输入框
Checkbox:复选框
Radio:单选框
Image:图片提交按钮
hidden:隐藏表单的元素
submit:提交按钮
reset:重置按钮
file:上传文件基本结构:
<form  action=””  method=””>
<input type=”类型”  name=”名字”/>
<form>
-->
<img src="https://img-blog.csdn.net/20150513210623372?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM3MjQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="400" height="150" alt="" />

<br><b>2、表单元素(form):<b><br><br><b>(1)登录系统:</b>
<!--
<form>表单标记,
action属性的值是要接受提交的数据页面的url
method属性指定数据提交的方式,主要有两种: get 和  post
post的安全性更高,
--><form action="ok.html" method="get"><br>用户名:<input type="text" name="username"/><br><br>
密  码:<input type="password" name = "password"/><br><br><input type= "submit" value="登陆"/>    
<input type="reset" value="重置"/><br><br><b>(2)请选择你喜欢吃的水果(复选框)</b><br><br>
<!--对于同一个调查的复选框,他们的name属性值要保持一致-->
<!--注意,服务器真正接收的值是value的值,而尖括号外的值苹果等只是在网页界面上显示给用户看的-->
<!--checked属性,默认选中该项,单选框也是如此-->
<input type="checkbox" name="fruit" value="pingguo">苹果<br>
<input type="checkbox" name="fruit" value= "xiangjiao">香蕉<br>
<input type="checkbox" name="fruit" value= "juzi" checked >橘子<br>
<input type="checkbox" name="fruit" value="lizhi">荔枝<br>
<input type="checkbox" name="fruit" value="taozi">桃子<br>
<input type="checkbox" name="fruit" value="yingtao">樱桃<br><input type= "submit" value="确定">    
<input type="reset" value ="重置"><br><br><b>(3)请选择你的性别(单选框)</b><br><br>
<!--对于同一个调查的单选框,他们的name属性值要保持一致;
对于每一个input一定要有name值,否则服务器将无法接收-->
<input type="radio" name="sex" value="nan">男<br>
<input type="radio" name="sex" value="nv">女<br><input type= "submit" name="确定">    
<input type="reset" name ="重置"><br><br><b>(4)隐藏域的使用</b><br><br>
<!--在网页中,如果我们希望提交某些数据(这些数据用户不能看见),但又不影响页面显示效果,可以考虑使用隐藏域--><input type="hidden" name="data" value="ok!"><br><br><b>(5)图片按钮的使用</b><br><br>
<br>用户名:<input type="text" name="username"/><br><br>
密  码:<input type="password" name = "password"/><br><br><input type= "image" src="login.png"/>    
<input type="reset" value="重置"/><br><br><b>(6)下拉列表的使用</b><br><br>
<b>请选择你的出生地:</b><br><br><!--size属性表示在页面上下拉列表显示几列,默认为1-->
<!--multiple属性表示下拉列表可多选,注意,是用 Ctrl 键配合鼠标实现多选。-->
<!--selected属性,下拉列表中默认选中该项-->
<select name="address" size="2" multiple> 
<option value="qingdao">青岛</option>
<option value="jinan">济南</option>
<option value="weifang" selected>潍坊</option>
<option value="jining">济宁</option>
<option value="yantai">烟台</option>
<option value="weihai">威海</option></select><br><br><b>(7)文本域的使用</b><br><br>
<!--文本域的大小用行和列表示-->
<textarea name = "my_textarea" rows="10" cols="50">请输入...</textarea><br><br><b>(8)文件上传的控件</b><br><br>
<input type="file" name="my_file">文件上传</br><input type= "submit" value="上传">    
<input type="reset" value ="重置"></form><br><br><b>(9)相关表单元素分组标记</b><br><br>
<img src="https://img-blog.csdn.net/20150513210727832?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM3MjQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="500" height="100" alt="" />
<form>
<!--fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。--><fieldset style="width:300px"><!--<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题--><legend>健康信息</legend>身高:<input type="text" name="shengao"/><br>体重:<input type="text" name="tizhong" /></fieldset>
</form></body>
</html></body></html>


这篇关于HTML 浮动窗口 表单及表单控件 标签汇总 线包字效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139877

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo