form表单以及内嵌框架标签
今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的;搭配table表格使用也是非常熟练。
下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页;还有在内嵌框架标签中添加视频以及视频标签里的一些属性进行调整。
<input type="text" name="user" placeholder="邮箱账号或者手机号码">在input里写,placeholder是让在表单里默认的字,删不掉哪种
<!--表单:
<form action="所有表单值提交的地址" mthod="提交的方式(默认get提交)"></form>
表单元素
提交方式:
1 get
所有表单的数据以键值对的方式 key=value的方式传递给后台
url:请求地址?key1=value1&key2=value2&key3=value3&.....
缺点:不安全,传递的内容大小有限制
2 post
不会显示表单数据
安全性高,传递的内容大小基本没有限制
表单元素通用格式:
<input type="表单元素的类型" name="键" value="值">
表单元素类型:
1 文本类型:
text:文本框
passwo:密码框
hidden:隐藏域
2 按钮类型
button:普通按钮
submit:提交按钮
resey:重置按钮
3 单选类型
radio:单选
必须搭配name属性使用 需要name值一样才能实现单选的效果
label标签:可直接点击label标签里的属性直接勾选,可点击label里的文字进行选择
checkbox:多选
checked:默认选择,放在哪个选择就是默认选择哪个 input中可使用select标签中不可使用
disabled: 直接锁死 不可编辑 input中可使用select标签可使用
4 文件
file:文件上传(必须在form标签中加 formenctype="multipart/form-data") 下拉框标签:
<select>
<optinon>选项1</optinon>
<optinon>选项2</optinon>
<optinon>选项3</optinon>
</select>
selected属性:select标签中用于默认选中状态,其他标签不可使用 --> <!--label标签:可直接点击label标签里的属性直接勾选,可点击label里的文字进行选择-->
<!--radio:单选-->
<!--必须搭配name属性使用 需要name值一样才能实现单选的效果-->
单选:
<br>
性别:
<label>
男<input type="radio" name="sex" value="man" checked>
</label>
<label>
女<input type="radio" name="sex" value="woman">
</label>
<br>
<!--value值是提交给后台让自己看的-->
多选:
<br>
爱好:
<label>
足球<input type="checkbox" name="hobbby">
</label>
<label>
篮球<input type="checkbox" name="hobbby">
</label>
<label>
排球<input type="checkbox" name="hobbby">
</label>
<br>
文件上传:
<input type="file">
<br>
地址:
<select name="" id="address"> <option value="zd" >张店区</option>
<option value="zc">周村区</option>
<option value="bs" selected>博山区</option>
</select> <!--文本域-->
<textarea name="text1" id="" cols="30" rows="10"></textarea>
<!doctype html>
<html>
<head>
<!--在head里面<link rel="icon" href="a.ico.ico" type="image/*">给图片加小图片
引入ico照片(必须是Ico) 照片位置 属性--> <meta charset="utf-8">
<title>无标题文档</title>
</head>
<!--内嵌框架标签:
<iframe name="名称">2</iframe> target="在哪里显示地址"
href="打开地址"
要是连接起来就给iframe一个name名字,再在其他的页面添加属性target="名字跟iframe里面的name值一样即可" 视频标签:
<video></video> -->
<body> <span style="background-color: blue" > 这是文字与文字背景添加颜色 </span> <a href="first.html" target="myhtml">天气</a>
<a href="second.html" target="myhtml">新闻</a>
<a href="third.html" target="myhtml">图片</a>
<br>
<!--内嵌框架-->
<iframe src="https://www.baidu.com" frameborder="0" name="myhtml" width="800" height="400"></iframe> <!--视频标签
controls 视频手动点击播放
autoplay 视频自动播放
loop 循环播放
-->
<video src="https://f.us.sinaimg.cn/000WYpXOlx07sA7ZDFrG01041200k8U80E010.mp4?label=mp4_ld&template=640x360.28.0&Expires=1553583758&ssig=6dK5%2FvJ0hv&KID=unistore,video" controls autoplay loop></video> </body>
</html>
form表单以及内嵌框架标签的更多相关文章
- html的<a>标签,表单,内嵌框架
一. <a>标签 0. 用图片当链接,就是把图片当成链接文字即可 <a href="http://www.baidu.com/" title="跳 ...
- 关于html 中form表单的内标签和使用
表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...
- 循序渐进PYTHON3(十三) --2-- DJANGO之FORM表单(自动生成HTML标签和自定制提示信息)
在上一次的代码上做出进一步修改,使之能在页面上显示自定制的报错信息,并且使用form自动创建标签的功能. views.py from django.shortcuts import render,Ht ...
- [oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)
1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...
- 【HTML】--- 列表、表格、form表单标签
Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...
- form表单与CSS选择器和样式操作
form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...
- html之form表单
目录 form表单 表单属性 action method input标签 select标签 textarea标签 form表单 表单能够获取用户输入,用于向服务器传输数据,从而实现用户与web服务器的 ...
- 用jquery写自己的form表单验证
这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...
- html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
随机推荐
- spring boot2+jpa+thymeleaf增删改查例子
参考这遍文章做了一个例子,稍微不同之处,原文是spring boot.mysql,这里改成了spring boot 2.Oracle. 一.pom.xml引入相关模块web.jpa.thymeleaf ...
- Learning-Python【21】:Python常用模块(4)—— re、logging、hashlib、subprocess
re 模块:与正则相关的模块 在使用 re 模块之前,需要先了解正则表达式(regular expression),描述了一种字符串匹配的模式(pattern),可以用来检查一个字符串是否含有某个子字 ...
- HDU2476 String painter——区间DP
题意:要把a串变成b串,每操作一次,可以使a串的[l,r]区间变为相同的一个字符.问把a变成b最少操作几次. 这题写法明显是区间dp ,关键是处理的方法. dp[l][r]表示b串的l~r区段至少需要 ...
- SQLyog 字体设置
新公司连接数据库的工具是SQLyog,我以前使用的一直是Navicat,抱着多学个工具也不亏的想法我也安装了试下,但是SQLyog那紧凑的字体对于近视200度的我来说看着着实难受,在询问了公司前辈之后 ...
- Android 开发版本统一
一.概述 对于 Android 开发版本的统一涉及到的东西就是 Gradle 中的全局设置,我们通过配置 gradle 也就是编写 Groovy 代码将开发中的版本号设置为全局参数.这样就能够在 mo ...
- trueStudio中使用printf函数
1.通过printf输出浮点数需要如下设置: 在工程属性下找到C/C++ build->Settings->Tool Settings->C Linker->Miscellan ...
- 查看指定库对应GCC版本
strings /usr/lib/libstdc++.so.6 | grep GLIBCXX
- openssl dgst(生成和验证数字签名)
openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 该伪命令是单向加密工具,用于生成文件的摘要信息,也可以进行数字签名,验证数字 ...
- Codeforces Round #542 [Alex Lopashev Thanks-Round] (Div. 1)C. Morse Code
题意:给你n个01字符,每次问你前缀的所有本质不同的子串,由摩斯密码组成的方案数和. 题解:离线处理,把字符建sam,通过topo序来dp计算每个节点表示的子串方案数的和.统计答案时,把n个字符挨个匹 ...
- Java反序列化漏洞实现
一.说明 以前去面试被问反序列化的原理只是笼统地答在参数中注入一些代码当其反序列化时被执行,其实“一些代码”是什么代码“反序列化”时为什么就会被执行并不懂:反来在运营商做乙方经常会因为java反反序列 ...