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

相关文章

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

MySQL基本表查询操作汇总之单表查询+多表操作大全

《MySQL基本表查询操作汇总之单表查询+多表操作大全》本文全面介绍了MySQL单表查询与多表操作的关键技术,包括基本语法、高级查询、表别名使用、多表连接及子查询等,并提供了丰富的实例,感兴趣的朋友跟... 目录一、单表查询整合(一)通用模版展示(二)举例说明(三)注意事项(四)Mapper简单举例简单查询

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

交换机救命命令手册! 思科交换机排障命令汇总指南

《交换机救命命令手册!思科交换机排障命令汇总指南》在交换机配置与故障排查过程中,总会遇到那些“关键时刻靠得住的命令”,今天我们就来分享一份思科双实战命令手册... 目录1. 基础系统诊断2. 接口与链路诊断3. L2切换排障4. L3路由与转发5. 高级调试与日志6. 性能与QoS7. 安全与DHCP8.

故障定位快人一步! 华为交换机排障命令汇总

《故障定位快人一步!华为交换机排障命令汇总》在使用华为交换机进行故障排查时,首先需要了解交换机的当前状态,通过执行基础命令,可以迅速获取到交换机的系统信息、接口状态以及配置情况等关键数据,为后续的故... 目录基础系统诊断接口与链路诊断L2切换排障L3路由与转发高级调试与日志性能、安全与扩展IT人无数次实战

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter