Html 表格标签和表单标签

news2024/9/20 14:44:52

表格标签


标签描述:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档的标题</title>
</head>

<body>
<!--标识边框的宽度-->
<table border="1">
    <thead>
       <tr>
            <th>主机名</th>
            <th>ip</th>
            <th>操作系统</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>www.baidu.com</td>
            <td>192.168.11.1</td>
            <td>Centos7</td>
        </tr>
        <tr>
            <td>www.hao123.com</td>
            <td>192.168.11.7</td>
            <td>Centos6</td>
        </tr>
    </tbody>
</table>


</body>

</html>

 

什么是表单标签


表单是用来采集用户的输入数据,然后将数据提交给服务器

表单的组成

一个表单有三个基本组成部分:

  • 表单标签:这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
  • 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  • 表单按钮:包括提交按钮、复位按钮和一般按钮;

表单标签

表单标签<form></form>

功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器语法:

<form action="url" method="get" ></form>
  action=“”  服务器地址
  method=“”  get  /  post         

1.Action 属性

action=" "  数据提交的路径     服务器地址

action 属性定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页,如果省略 action 属性,则 action 会被设置为当前页面。

2.method 
method=" "    方式  方法  数据提交的方式

method 属性规定在提交表单时所用的方法(GET 或 POST):

<form action="" method="get">
        
    </form>
<form action="" method="post">
        
    </form>

①什么时候使用 GET?
如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。

1.当您使用 GET 时,表单数据在页面地址栏中是可见的,安全性较低

http://127.0.0.1:8848/lianxi/03%E8%A1%A8%E5%8D%95.html?usernamme=fds&pwd=123&tj=%E6%8F%90%E4%BA%A4%E6%8C%89%E9%92%AE

2.GET 最适合少量数据的提交。浏览器会设定容量限制。

3.get方式可能获取的数据是浏览器里的缓存信息

②什么时候使用 POST?
如果表单正在更新数据,或者包含敏感信息(例如密码)。

POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的。

 action填了具体的地址,其实就是将表单的内容提交到这个网址。说白了,就是往这个站点发一个请求。请求方法喝编码类型你自己去决定。

表单项标签 <input>

属性描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
</head>

<body>
    <form name="input" action="https://www.baidu.com/" method="post">
        FirstName: <input type="text" name="firstname"> <br/>
        LastName: <input type="text" name="lastname"> <br/>

        <input type="radio" name="sex" value="male" checked>男
        <input type="radio" name="sex" value="femal" >女 <br/>

        <input type="checkbox" name="hobby" value="bike" checked>自行车
        <input type="checkbox" name="hobby" value="car">汽车 <br/>

        <input type="submit" value="提交"> <br/>

        <input type="button" value="验证按钮" onclick="alert('密码输入正确')"><br/>

        <input type="reset">
    </form>
</body>

</html>

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

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

相关文章

DataOps是现代数据堆栈的未来吗?

DevOps 席卷软件工程世界之前&#xff0c;一旦应用程序启动并运行&#xff0c;开发人员就会一头雾水。 工程师不是第一个知道何时发生中断&#xff0c;而是只会发现客户或利益相关者何时抱怨“网站滞后”或 503 页面过多。 不幸的是&#xff0c;这导致了同样的错误反复出现&a…

金九银十Java面试八股文大全1200道面试题附答案详解(2023版)

Java 面试八股文有必要背吗&#xff1f; 我的回答是&#xff1a;很有必要。你可以讨厌这种模式&#xff0c;但你一定要去背&#xff0c;因为不背你就进不了大厂。现如今&#xff0c;Java 面试的本质就是八股文&#xff0c;把八股文面试题背好&#xff0c;面试才有可能表现好。…

php怎么在线预览word文件?php预览.doc、.docx、.wps文件

php预览Word PHP要实现在线Word预览只需要3步 第一步&#xff1a; 准备一个文件地址&#xff0c;如下&#xff1a; http://usdoc.cn/vw/文件模板.docx 第二步 预览前置地址&#xff1a; http://vw.usdoc.cn/?src 第三步 开始预览 http://vw.usdoc.cn/?srchttp://usdoc.cn/vw/…

windows10家庭版禁用Device/Credential Guard解决方案

文章目录 背景&#xff08;禁用的原因&#xff09;解决的方式方式一&#xff1a;通过Windows本身的功能设置禁用 ( 非家庭版的使用)1. 禁用Device Guard或Credential Guard&#xff1a;2. 关闭Hyper-V选项3. 重启电脑 方式二&#xff1a;通过命令关闭Hyper-V ( Windows 10家庭版…

Liunx 安装 Miniconda与Python环境

在国内从官网上下载安装包会比较慢&#xff0c;下载最新版容易&#xff0c;过往版本不易寻找。生信软件一般建议使用过往的稳定版本&#xff0c;尤其是公司集群的系统版本低&#xff0c;很容易版本不匹配。推荐从清华大学的源下载。 下载 ## anaconda的官网地址 https://www…

网络层:IP数据报的发送和转发过程

网络层&#xff1a;IP数据报的发送和转发过程 笔记来源&#xff1a; 湖科大教书匠&#xff1a;IP数据报的发送和转发过程 声明&#xff1a;该学习笔记来自湖科大教书匠&#xff0c;笔记仅做学习参考 IP数据报的发送和转发过程包含两个部分&#xff1a; 主机发送IP数据报 路由器…

Maven配置文件settings.xml 和 jar包下载失败处理

1.配置国内的Maven源1.1 mirrors代码 2.重新下载jar包3.其他问题 1.配置国内的Maven源 1.先打开自己的Idea检测Maven是否配置正确。 Idea的设置分两种&#xff1a;一是配置当前项目&#xff1b;二是配置新项目&#xff0c;所以下述所有配置操作我们需要操作两次 2.检查settings…

PMP项目管理证书是什么?有什么用?

什么是PMP证书&#xff1f; PMP全称是Project Management Professional&#xff0c;中文全称叫项目管理专业人士资格认证&#xff0c;是由美国项目管理协会(PMI)发起&#xff0c;严格评估项目管理人员知识技能是否具有高品质的资格认证考试&#xff0c;目的是为了给项目管理人…

3D格式转换工具HOOPS Exchange​助力Zuken打造电子设计自动化产品

行业&#xff1a;电子制造 挑战&#xff1a;对制造商来说&#xff0c;电子设计变得越来越复杂 - 电气和机械设计的融合需要将二维和三维数据结合起来 - 需要提供对多种不同CAD格式的支持 解决方案&#xff1a;HOOPS Exchange是用于快速、准确的CAD数据转换的领先SDK&#xff…

vscode右键点击,松开后自动触发鼠标所在位置的按钮(误触发双击效果)

例如如下&#xff0c;右键展开菜单&#xff0c;松手会自动触发转到声明功能 解决方案&#xff1a; 1、安装easystroke sudo apt-get install easystroke 2、打开easystroke&#xff0c;选择preferences tab 3、点击Gesture Button&#xff0c;在出现的框中右键单击一次 4、点…

基于python的数据集扩充增强

前言 数据增强技术在深度学习中得到了广泛的应用&#xff0c;它能够有效地扩充训练数据集的大小&#xff0c;提高模型的泛化能力&#xff0c;同时也能够有效地防止过拟合现象的发生。在本篇中&#xff0c;将讲解一种基于 Python 和 OpenCV 库实现的数据增强方法&#xff0c;并提…

Notes/Domino 14新变化

大家好&#xff0c;才是真的好。 一周没见&#xff0c;有没有分外想念&#xff1f; 这周马上要发布HCL Notes/Domino 14 Drop1版本&#xff0c;许多人摩拳擦掌&#xff0c;跃跃欲试。今天我们就不说功能&#xff0c;而从底层来说&#xff0c;这回14版本带来的变化真的很大&am…

JAVA如何学习爬虫呢?

学习Java爬虫需要掌握以下几个方面&#xff1a; Java基础知识&#xff1a;包括Java语法、面向对象编程、集合框架等。 网络编程&#xff1a;了解HTTP协议、Socket编程等。 HTML、CSS、JavaScript基础&#xff1a;了解网页的基本结构和样式&#xff0c;以及JavaScript的基本语…

掌握Scala数据结构(1)ARRAY、LIST

一、数组 (Array) &#xff08;一&#xff09;定长数组 1、数组定义 &#xff08;1&#xff09;定义数组时初始化数据、、 数组的静态初始化自动推断数组类型 手动指定数据类型 &#xff08;2&#xff09;定义时指定数组长度&#xff0c;后赋值 先定义&#xff0c;后赋值&…

不入耳蓝牙耳机音质好吗?音质表现好的不入耳蓝牙耳机推荐

​不入耳蓝牙耳机因其不入耳佩戴设计&#xff0c;受到很多人的喜欢&#xff0c;也更多人开始使用不入耳式蓝牙耳机了。为了让大家能更快选购不入耳蓝牙耳机&#xff0c;今天就让我来给大家介绍几款性能不错的不入耳蓝牙耳机&#xff0c;一起看看有哪些吧。 一、南卡OE不入耳蓝…

电流检测电路选高侧还是低侧

两种电流检测电路 在电路设计中&#xff0c;使用最广泛的电流采样方法是在电流回路中串联高精度的电阻&#xff0c;通过测量电阻两端的电压计算回路的电流值大小。具体检测方法有如下两种&#xff1a; 高侧电流检测 图1 高侧电流检测 如图1&#xff0c;高侧电流检测&#xff…

Selenium各种浏览器的驱动下载

Selenium各种浏览器的驱动下载 谷歌浏览器&#xff1a;​​​​​​Chrome驱动版本点击下载&#xff08;如果打不开&#xff0c;可以点击淘宝源进行下载) 微软Edge浏览器&#xff1a;Microsoft Edge驱动版本点击下载 火狐浏览器&#xff1a;Firefox驱动版本点击下载 Chrome…

科技点亮课堂,智能黑板解决方案

教育信息化自诞生以来&#xff0c;一直都在不断地向上发展&#xff0c;随着教育信息化2.0、教育现代化2035等战略的推进&#xff0c;教育信息化的步伐逐渐加快&#xff0c;越来越多的学校开始采用智慧型教学终端部署&#xff0c;以更好地促进高效、公平、个性化的教学发展。智能…

索尼mxf播放花帧无声音的修复方法

索尼的影视级摄像机一般是用MXF文件结构&#xff0c;在一些极端情况下(如断电)会生成RSV文件&#xff0c;此时RSV文件无文件结构&#xff08;无文件头、元文件、文件尾等&#xff09;仅仅为数据EC内容&#xff0c;今天我们来说一个特殊的案例&#xff0c;封装只做了文件头结果出…

prometheus监控应用数据(二)

prometheus监控应用数据(二) 本文承接上篇文章prometheus监控应用数据(一)。使用开源软件prometheus对上篇文章中提及到的数据进行可视化监控。 本文使用docker进行prometheus的部署&#xff0c;准备以下两个文件&#xff0c;以及文件内内容如下所示: .env文件 # Container Ti…