Web前端基础知识(三)

news2025/3/18 15:17:26

表单的应用非常丰富,可以说,每个网站都会用到表单。下面首先介绍表单中的form标签。

---------------------------------------------------------------------------------------------------------------------------------

<form></form>:

表单中的容器,创建一个表单,就和创建一个表格差不多。表单中的所有元素必须包含在form标签内部。

form标签中最常用的是输入标签<input>

---------------------------------------------------------------------------------------------------------------------------------

<input>:

常用属性type,规定了input元素的类型。

---------------------------------------------------------------------------------------------------------------------------------

举例:

 <form action="">

        <input type="text" placeholder="请输入内容">

        <input type="text" value="请输入内容">

    </form>

效果:

对于第一种,在文本框中输入内容,灰色部分字体消失。

对于第二种,文本框自动填写内容。

---------------------------------------------------------------------------------------------------------------------------------

input 的value属性,规定了input元素的值。

input 的placeholder属性,只是给用户一个友好提示。

---------------------------------------------------------------------------------------------------------------------------------

在form表单中,有专门为input元素做标记的标签,即<label>,它的作用与<span>标签差不多。

<label>,仅限于和<input>对应使用。

举例:

 <form action="">

        <label>用户名:</label>

        <input type="text" placeholder="请输入内容">

        <br>

        <br>

        <label>密 码:</label>

        <input type="text" value="请输入内容">

    </form>

效果:

---------------------------------------------------------------------------------------------------------------------------------

input标签还可以变成单选框。比如,在有的网站注册页面时,可能会需要选择性别。

举例:

 <label for="">性别</label>

        <input type="radio">男

        <input type="radio">女

效果:

问题:

单选效果。

改进:

单选选项的name属性值一致

 <label for="">性别</label>

        <input type="radio" name="gender">男

        <input type="radio" name="gender">女

  效果:

---------------------------------------------------------------------------------------------------------------------------------

label标签的for属性,把label标签绑定到input元素,但,label中的for属性一般是与input标签中的id所对应。id对于每个元素来说都是唯一的。

举例:

 <form action="">

        <label for="username">用户名:</label>

        <input type="text" id="username"  placeholder="请输入用户名">

        <br>

        <br>

        <label for="pwd">密 码:</label>

        <input type="password" id="pwd" placeholder="请输出密码">

        <br><br>

        <label >性别</label>

        <input type="radio" name="gen">男

        <input type="radio" name="gen">女

    </form>

效果:

---------------------------------------------------------------------------------------------------------------------------------

举例:

 <label>爱好</label>

        <input type="checkbox" name="hobbby">唱歌

        <input type="checkbox" name="hobbby">写作

        <input type="checkbox" name="hobbby">阅读

        <input type="checkbox" name="hobbby">羽毛球

效果:

---------------------------------------------------------------------------------------------------------------------------------

举例:

<input type="submit">

效果:

解释:

按钮作用:将表单中填写的数据,提交到一个地方。


<form>标签的一个属性 action:提交标签时,即,点击提交按钮时,向何处发送填写的数据。所以,action的属性值为 URL(需要服务器,即后端,提供API)。目前没有后端,使用“#”表示不跳转。


举例:

<input type="submit" value="上传">

效果:

---------------------------------------------------------------------------------------------------------------------------------

后续内容见《Web前端基础知识(四)》

       

   

       

 

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

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

相关文章

学习C++:程序的注释

一&#xff0c;注释 作用&#xff1a;在代码种加一些说明和解释&#xff0c;方便自己或其他程序员阅读代码 1&#xff0c;单行注释&#xff1a;// 描述信息 通常放在一行代码的上方&#xff0c;或者一条语句的末尾&#xff0c;对该行代码说明。 2&#xff0c;多行注释&#x…

LAION-SG:一个大规模、高质量的场景图结构注释数据集,为图像-文本模型训练带来了革命性的进步。

2024-12-03&#xff0c;由浙江大学、江南大学、北京大学、阿里巴巴集团和蚂蚁集团联合创建的LAION-SG数据集&#xff0c;通过提供高质量的场景图&#xff08;SG&#xff09;结构注释&#xff0c;显著提升了复杂场景图像生成的性能&#xff0c;为图像-文本模型训练带来了革命性的…

低压降稳压器(LDO)典型特性压降

本文章是笔者整理的备忘笔记。希望在帮助自己温习避免遗忘的同时&#xff0c;也能帮助其他需要参考的朋友。如有谬误&#xff0c;欢迎大家进行指正。 一、什么是压降 压降电压 VDO 是指为实现正常稳压&#xff0c;输入电压 VIN 必须高出所需输出电压 VOUT(nom) 的最小压差。请…

01 - 初识 Spring

初识Spring 企业级应用 企业级应用是指那些为商业组织、⼤型企业而创建并部署的解决⽅案及应用。这些⼤型的企业级应用结构复 杂、涉及的外部资源众多&#xff0c;事务密集&#xff0c;数据规模⼤&#xff0c;用户数量多&#xff0c;有较强的安全性考虑和较⾼的性能要求。 …

NLP 中文拼写检测纠正论文-04-Learning from the Dictionary

拼写纠正系列 NLP 中文拼写检测实现思路 NLP 中文拼写检测纠正算法整理 NLP 英文拼写算法&#xff0c;如果提升 100W 倍的性能&#xff1f; NLP 中文拼写检测纠正 Paper java 实现中英文拼写检查和错误纠正&#xff1f;可我只会写 CRUD 啊&#xff01; 一个提升英文单词拼…

【CSS in Depth 2 精译_091】15.4:让 CSS 高度值过渡到自动高度 + 15.5:自定义属性的过渡设置(全新)+ 15.6:本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼15.2 定时函数 15.2.1 定制贝塞尔曲线15.2.2 阶跃 15.3 非动画属性 15.3.1 不可添加动画效果的属性15.3.2 淡入与淡出 15.4 过…

PMP项目管理考试模拟真题及答案(中文版)

1、赶工一个任务时&#xff0c;你应该关注: A 尽可能多的任务。 B 非关键任务。 C 加速执行关键路径上的任务。 D通过成本最低化加速执行任务。 正确答案:C 2、“在对软件编码前我不能进行软件测试。”这句话说明了哪种依赖关系? A 随意的 B软逻辑关系 C 优先 D 强制…

CentOS7下的vsftpd服务器和客户端

目录 1、安装vsftpd服务器和ftp客户端&#xff1b; 2、配置vsftpd服务器&#xff0c;允许普通用户登录、下载、上传文件&#xff1b; 3、配置vsftpd服务器&#xff0c;允许anonymous用户登录、下载、上传文件&#xff1b; 4、配置vsftpd服务器&#xff0c;允许root用户登录…

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——12使用YOLO-Bin

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——12使用YOLO-Bin ​ 根据前面内容&#xff0c;所有的子任务已经基本结束&#xff0c;接下来就是调用转化的bin模型进行最后的逻辑控制了 1 .YOLO的bin使用 ​ 对于yolo其实有个简单的办法&#xff0c;也…

109.【C语言】数据结构之求二叉树的高度

目录 1.知识回顾&#xff1a;高度&#xff08;也称深度&#xff09; 2.分析 设计代码框架 返回左右子树高度较大的那个的写法一:if语句 返回左右子树高度较大的那个的写法二:三目操作符 3.代码 4.反思 问题 出问题的代码 改进后的代码 执行结果 1.知识回顾&#xf…

STM32学习(一)

STM32是什么 STM32是意法半导体&#xff08;ST&#xff09;公司基于ARM Cortex-M内核开发的32位微控制器‌。他的名字是由&#xff1b;意大利SGS&法国Thomson共同研制的&#xff0c;中国人民取两家公司名称的首字母于是ST就是这样来的&#xff0c;M是单片机M-Micro Contro…

Windows、CentOS环境下搭建自己的版本管理资料库:GitBlit

可以搭建属于公司内部或者个人的Git服务器&#xff0c;方便程序代码及文档版本管理。 官网&#xff1a;http://www.gitblit.com/ Windows环境下安装 提前已经安装好了JDK。 官网下载Windows版的GitBlit。 将zip包解压到自己想要放置的文件夹下。 建立版本库路径&#xff0c…

音视频入门基础:MPEG2-TS专题(22)——FFmpeg源码中,获取TS流的音频信息的实现

一、引言 通过FFmpeg命令可以获取到TS文件/TS流的音频压缩编码格式、音频压缩编码格式的profile、音频采样率、通道数、音频码率信息&#xff1a; ./ffmpeg -i XXX.ts 本文以音频为AAC为例讲述FFmpeg到底是从哪个地方获取到这些音频信息的。 二、音频压缩编码格式 FFmpeg获取…

中伟视界:电话、短信怎么在矿山智能分析平台中的报警等级管理中分级通知到相关人员

在现代矿山安全管理中&#xff0c;通讯报警系统的有效性不可忽视&#xff0c;智慧矿山的融合通信与AI智能预警的联动&#xff0c;已经成为矿山智能化的一个发展方向。随着科技的发展&#xff0c;矿山智能分析平台越来越受到企业的青睐&#xff0c;通过对报警信息的分级管理&…

音视频入门知识(二)、图像篇

⭐二、图像篇 视频基本要素&#xff1a;宽、高、帧率、编码方式、码率、分辨率 ​ 其中码率的计算&#xff1a;码率(kbps)&#xff1d;文件大小(KB)&#xff0a;8&#xff0f;时间(秒)&#xff0c;即码率和视频文件大小成正比 YUV和RGB可相互转换 ★YUV&#xff08;原始数据&am…

论文研读:AnimateDiff—通过微调SD,用图片生成动画

1.概述 AnimateDiff 设计了3个模块来微调通用的文生图Stable Diffusion预训练模型, 以较低的消耗实现图片到动画生成。 论文名&#xff1a;AnimateDiff: Animate Your Personalized Text-to-Image Diffusion Models without Specific Tuning 三大模块&#xff1a; 视频域适应…

百度地图绘制行政区域及设置中心点

// 画行政区 const drwaDistrict (disList, clear true) > {clear && clearOverlays();if (!bMapGL.value) return;let bd new bMapGL.value.Boundary();disList.map((item) > {bd.get(item, function (rs1) {// rs1 是行政区对应的点集合 此处非每次必反信息…

jetson Orin nx + yolov8 TensorRT 加速量化 环境配置

参考【Jetson】Jetson Orin NX纯系统配置环境-CSDN博客 一 系统环境配置&#xff1a; 1.更换源&#xff1a; sudo vi /etc/apt/sources.list.d/nvidia-l4t-apt-source.list2.更新源&#xff1a; sudo apt upgradesudo apt updatesudo apt dist-upgrade sudo apt-get updat…

VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试

VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试 一、打开设备管理器看主机&#xff08;Window系统&#xff09;是否识别出串口&#xff0c;我这边显示的串行通信端口是COM3 二、打开VirtualBox&#xff0c;设置串口和USB设备 串口设置&#xff1a; 启用…

Python 自动化 打开网站 填表登陆 例子

图样 简价&#xff1a; 简要说明这个程序的功能&#xff1a; 1. **基本功能**&#xff1a; - 自动打开网站 - 自动填写登录信息&#xff08;号、公司名称、密码&#xff09; - 显示半透明状态窗口实时提示操作进度 2. **操作流程**&#xff1a; - 打开网站后自动…