web前端-html:简单创建表格表单相结合的网页

news2024/10/24 5:50:57

效果:

<body>
    <form action="这里如果为空表单提交后不会有任何操作"
			  method="get"
              <label for="edit">用户名</label>
			  <input type="text" name="用户名" id="最好不要空,id属性唯一" value=""> <br />
              <label for="edit">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
              <input type="password"  > <br />
              <label for="hob">性别</label>
              <input type="radio" name="性别" value="女" checked/>女
			  <input type="radio" name="性别" value="男" >男<br />
              <label for="hob">爱好</label>
              <input type="checkbox" name="爱好" value="写作" >写作
			  <input type="checkbox" name="爱好" value="听音乐" >听音乐
			  <input type="checkbox" name="爱好" value="体育">体育<br />
              <select name="省份" multiple>
                <option >陕西</option>
                <option >广西</option>
                <option >山西</option>
            </select>
                <label for="introduction">自我介绍</label>
            <textarea name="自我介绍" id="introduction" cols="30" rows="10" ></textarea>
              <input type="submit" value="提交">
              <input type="reset" value="重置">
            </form>
</body>

知识点分析:

所有的name属性都用来定义一个名称,这个名称用于在表单提交时标识数据。

<form>标签用来创建一个表单

action属性用来指定表单数据提交到的服务器端脚本的URL,在实际开发的时候action应该设置具体的URL

method属性决定使用哪种请求方式(get/post),

get

             1.在前端的表单中,get上传数据量是受浏览器限制 

              2.会将表单的所有数据频道url中,所以安全性较差

              3.get会在浏览器的历史记录中保存

 post

         1.数据量无限制 

           2.post使用requestbody,他是隐蔽的,所以安全性较强

           3.post不会讲关键表单信息保存在历史记录中

           

 <textarea>标签的id属性值应该是唯一的,并且与<label>标签的for属性相匹配

<label>:提高表单课访问性,当用户点击标签时,对应的表单控件会获得焦点---for:指定该标签所关联的表单控件的id

<input type给出一个文本框并定义输入控件的类型,value是定义输入控件的初始值

 <select >:定义了一个下拉选择框,允许用户从多个选项中选择一个或多个值。---multiple:当这个属性存在时,允许用户从下拉列表中选择多个选项

<option >:定义关联元素中的一个选项。

<input type="submit" value="提交">定义了一个按钮,点击后将表单数据提交到在<form>标签的action属性中指定的URL
 <input type="reset" value="重置">将表单中的所有输入控件重置为它们的初始值。

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

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

相关文章

【MySQL】详解MySQL数据类型

一、数据类型 各类型的数值范围&#xff1a; 在MySQL中&#xff0c;整型可以指定是有符号的和无符号的&#xff0c;默认是有符号的。 可以通过UNSIGNED来说明某个字段是无符号的。对于int类型可能存放不下的数据&#xff0c;尽量不使用unsigned&#xff0c;unsigned int 同样可…

分布式链路追踪-01初步认识SkyWalking

一 SkyWaling是什么&#xff1f; Skywalking是分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Docker、K8s、Mesos&#xff09;架构而设计。SkyWalking 是观察性分析平台和应用性能管理系统&#xff0c;提供分布式追踪、服务网格遥…

信发软件之电脑版拖动——未来之窗行业应用跨平台架构

一、电脑版拖动 二、电脑版随意移动函数 var _movefalse;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $("#"宿主id).click(function(){ }).mousedown(function(e){ _movetrue; _xe.pageX-parseInt($("#"宿主id).css("left")); _ye…

Spring Boot论坛网站:安全特性与性能优化

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

计算机网络(十二) —— 高级IO

#1024程序员节 | 征文# 目录 一&#xff0c;预备 1.1 重新理解IO 1.2 五种IO模型 1.3 非阻塞IO 二&#xff0c;select 2.1 关于select 2.2 select接口参数解释 2.3 timeval结构体和fd_set类型 2.4 socket就绪条件 2.5 select基本工作流程 2.6 简单select的服务器代…

论文解读 | ECCV2024 AutoEval-Video:一个用于评估大型视觉-语言模型在开放式视频问答中的自动基准测试...

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 作者简介 陈修元&#xff0c;上海交通大学清源研究院硕士生 概述 总结来说&#xff0c;我们提出了一个新颖且具有挑战性的基准测试AutoEvalVideo&#xff0c;用于全…

蓝牙资讯|iOS 18.1 正式版下周推送,AirPods Pro 2耳机将带来助听器功能

苹果公司宣布将在下周发布 iOS 18.1 正式版&#xff0c;同时确认该更新将为 AirPods Pro 2 耳机带来新增“临床级”助听器功能。在启用功能后&#xff0c;用户首先需要使用 AirPods 和 iPhone 进行简短的听力测试&#xff0c;如果检测到听力损失&#xff0c;系统将创建一项“个…

5G RedCap工业路由器赋能电力物联网应用

随着5G轻量化技术应用的推进&#xff0c;5G RedCap旨在提供低功耗、低成本、广覆盖等功能特点赋能电力智能化升级。特别适用于工业物联网、低空经济、车联网、消费电子和轻量级5G的需求。 5G RedCap工业路由器的特点 低功耗&#xff1a;5G RedCap工业路由器通过节能技术&#…

win10下用vscode和pycharm运行odoo18的速度对比

我很少用win平台开发odoo&#xff0c;主要原因就是速度太慢&#xff0c;效率太低&#xff0c;这次odoo18发布&#xff0c;我做odoo18的基础培训教程的时候&#xff0c;发现odoo运行速度相比以前有大大改观&#xff0c;虽然还是不如ubuntu&#xff0c;但是确实提高很多了环境&am…

如何搭建一部引人入胜的短剧小程序

在移动互联网时代&#xff0c;短剧小程序以其轻便、快捷的特点迅速成为人们消遣娱乐的新宠。无论是在通勤途中、休息时间还是等待间隙&#xff0c;用户都能通过手机轻松观看精彩短剧&#xff0c;享受碎片化时间的娱乐盛宴。如果你是一位对内容创作充满热情的创作者&#xff0c;…

网络安全领域推荐证书介绍及备考指南

在网络安全领域&#xff0c;拥有专业认证不仅可以证明个人的专业能力&#xff0c;还能帮助在实际工作中应用先进的技术和知识。以下是几种热门的网络安全证书介绍及备考指南。 1. OSCP (Offensive Security Certified Professional) 证书简介 OSCP是针对渗透测试领域的入门级…

GRU神经网络理解

全文参考以下B站视频及《神经网络与深度学习》邱锡鹏&#xff0c;侧重对GPU模型的理解&#xff0c;初学者入门自用记录&#xff0c;有问题请指正【重温经典】GRU循环神经网络 —— LSTM的轻量级版本&#xff0c;大白话讲解_哔哩哔哩_bilibili 更新门、重置门、学习与输出 注&a…

Django 项目的创建

1.安装Django pip install django 2.创建项目 在想要创建的项目我文件位置同时按住Shift右键打开Powershell窗口。 输入命令 django-admin startproject myproject 这里 myproject 是你的项目名称&#xff0c;你可以根据需要替换为其他名称。。 3. 理解项目结构 创建项目…

Netty简单应用

1.服务端构建 接收客户端请求&#xff0c;打印请求消息&#xff1b;消息采用内置String作为编码与解码器&#xff1b;开启信息输入监听线程&#xff0c;发送消息至客户端&#xff1b; 1.1 服务端消息处理类 import io.netty.channel.Channel; import io.netty.channel.Chann…

一款好用的搜索软件——everthing(搜索比文件资源管理器快)

everthing官网链接 在官网选择下载 1.下载后双击打开 2.点击OK&#xff08;需要其他语言自己选择&#xff09; 3.选择安装位置&#xff08;路径最好别带中文和空格&#xff09; 继续点击下一步 4. 点击下一步 5.继续点击安装 6.然后就完成了 7.点击打开然后就可以搜索了

零代码快速开发智能体 |甘肃旅游通

在互联网信息爆炸的时代&#xff0c;寻找一处让人心动的旅游胜地往往需要花费大量的时间和精力。而今天&#xff0c;我要向大家介绍一款能够帮助你轻松规划甘肃之行的智能体——“甘肃旅游通”。这款智能体通过低代码开发&#xff0c;集合了丰富的旅游信息和个性化推荐功能&…

Viky图片压缩 v3.1 超简单,一键压缩,高压缩率,肉眼无损

下载&#xff1a;https://pan.quark.cn/s/166406040a7b 软件介绍&#xff1a; 使用方法 拖入即压缩 功能 智能压缩&#xff0c;高压缩率&#xff0c;肉眼无损 支持WebP、JPG、JPEG、PNG格式 多线程处理&#xff0c;提升批量压缩速度 带进度显示&#xff0c;以及压缩前后对比 …

QT枚举类型转字符串和使用QDebug<<重载输出私有枚举类型

一 将QT自带的枚举类型转换为QString 需要的头文件&#xff1a; #include <QMetaObject> #include <QMetaEnum> 测试代码 const QMetaObject *metaObject &QImage::staticMetaObject;QMetaEnum metaEnum metaObject->enumerator(metaObject->indexOf…

pikachu靶场CSRF-post测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、抓包使用burp生成csrf脚本 四、源代码分析 五、结论 一、测试环境 1、系统环境 渗透机&#xff1a;本机(127.0.0.1) 靶 机&#xff1a;本机(127.0.0.1) 2、使用工具/软件 Burp sui…

基于Session的认证方式

基于Session的认证方式 认证流程创建工程创建maven工程Spring 容器配置servletContext配置加载 Spring容器 实现认证功能认证页面认证接口 实现会话功能实现授权功能小结 认证流程 基于Session认证方式的流程是&#xff0c;用户认证成功后&#xff0c;在服务端生成用户相关的数…