Web前端基础知识(三)

表单的应用非常丰富,可以说,每个网站都会用到表单。下面首先介绍表单中的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前端基础知识(四)》

       

   

       

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NLP中的神经网络基础

一&#xff1a;多层感知器模型 1&#xff1a;感知器 解释一下&#xff0c;为什么写成 wxb>0 &#xff0c;其实原本是 wx > t ,t就是阈值&#xff0c;超过这个阈值fx就为1&#xff0c;现在把t放在左边。 在感知器里面涉及到两个问题&#xff1a; 第一个&#xff0c;特征提…

docker安装MySQL--宝塔面板操作版

记录 1 在centos中安装宝塔面板 参照宝塔面板官方网页上步骤进行操作&#xff0c;然后登录网页地址 成功后直接拉取 成功后可以在本地镜像中看到 2 创建配置文件 cd /home/mysql/conf vim my.cnf [rootplmomn-gw conf]# cat /home/mysql/conf/my.cnf [client] #设置客户端…

C++简明教程(3)(初识VS)

一、编程工具大揭秘——IDE 当我们准备踏入 C 编程的奇妙世界时&#xff0c;首先要认识一个重要的“魔法盒子”——集成开发环境&#xff08;IDE&#xff09;。IDE 就像是一个全能的编程工作室&#xff0c;它把我们写代码所需要的各种工具都整合到了一起&#xff0c;让编程这件…

电脑出现 0x0000007f 蓝屏问题怎么办,参考以下方法尝试解决

电脑蓝屏是让许多用户头疼的问题&#xff0c;其中出现 “0x0000007f” 错误代码更是较为常见且棘手。了解其背后成因并掌握修复方法&#xff0c;能帮我们快速恢复电脑正常运行。 一、可能的硬件原因 内存问题 内存条长时间使用可能出现物理损坏&#xff0c;如金手指氧化、芯片…

分布式调度框架学习笔记

一、分布式调度框架的基本设计 二、线程池线程数量设置的基本逻辑 cpu是分时复用的方法&#xff0c;线程是cpu调度的最小单元 如果当前cpu核数是n&#xff0c;计算密集型线程数一般设为n&#xff0c;io密集型(包括磁盘io和网络io)线程数一般设置为2n. 计算密集型线程数一般设…

快速排序算法 -- 深入研究

一 . 快排性能的关键点分析 快排性能的关键点分析 : 决定快排性能的关键点是每次单趟排序后 &#xff0c; key 对数组的分割 &#xff0c; 如果每次选key 基本二分居中&#xff0c;那么快排的递归树就是颗均匀的满二叉树&#xff0c;性能最佳。但是实际中虽然不可能每次都是二…

ORA-65198 PDB clone 时 不能新加datafile 以及hang的一个原因

create pluggable database XX from SS keystore identified by "YYY" parallel 32 service_name_convert( _srv, _srv); 20TB 4小时 update /* rule */ undo$ set name:2,file#:3,block#:4,status$:5,user#:6,undosqn:7,xactsqn:8,scnbas:9,scnwrp:10,inst#:11,…

Android--java实现手机亮度控制

文章目录 1、开发需求2、运行环境3、主要文件4、布局文件信息5、手机界面控制代码6、debug 1、开发需求 需求&#xff1a;开发一个Android apk实现手机亮度控制 2、运行环境 Android studio最新版本 3、主要文件 app\src\main\AndroidManifest.xml app\src\main\res\layou…

HarmonyOS NEXT 实战之元服务:静态案例效果--- 日出日落

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1完整代码案例如下&#xff1a; import { authentication } …

一起学Git【番外篇:如何在Git中新建文件】

在介绍Git之前&#xff0c;我们需要了解一下如何在Git里添加、编辑和删除文件。 首先&#xff0c;需要使用文件编辑器进行文件的创建&#xff0c;常见的文件编辑器有以下几种&#xff1a; Vim&#xff1a;一种基于命令行的编辑器&#xff0c;功能强大&#xff0c;适合开发者和…

叉车作业如何确认安全距离——UWB测距防撞系统的应用

叉车在工业环境中运行&#xff0c;常常需要在狭窄的空间内完成货物的搬运和堆垛&#xff0c;这对操作员的技术水平和安全意识提出了极高的要求。传统的叉车作业依赖操作员的经验和视觉判断来确认安全距离&#xff0c;然而这种方式往往存在误差&#xff0c;特别是在视线受阻或光…

hi168大数据离线项目环境搭建

hi168大数据离线项目环境搭建 ## **1. 服务器准备**##### 1.1 创建集群应用节点 集群服务器使用“我的应用“中的Ubuntu22.04集群模版创建三个节点应用&#xff0c;并且进入“我的应用”中去修改一下节点名称&#xff08;node1对应master&#xff0c;node2对应hadoop1&#xf…

分布式专题(10)之ShardingSphere分库分表实战指南

一、ShardingSphere产品介绍 Apache ShardingSphere 是一款分布式的数据库生态系统&#xff0c; 可以将任意数据库转换为分布式数据库&#xff0c;并通过数据分片、弹性伸缩、加密等能力对原有数据库进行增强。Apache ShardingSphere 设计哲学为 Database Plus&#xff0c;旨在…

大模型-Ollama使用相关的笔记

大模型-Ollama使用相关的笔记 解决Ollama外网访问问题&#xff08;配置ollama跨域访问&#xff09;Postman请求样例 解决Ollama外网访问问题&#xff08;配置ollama跨域访问&#xff09; 安装Ollama完毕后&#xff0c; /etc/systemd/system/ollama.service进行如下修改&#…

Python:模拟(包含例题:饮料换购 图像模糊 螺旋矩阵)

模拟题&#xff1a;直接按照题目含义模拟即可&#xff0c;一般不涉及算法 注意&#xff1a; 1.读懂题&#xff1a;理清楚题目流程 2.代码和步骤一一对应&#xff1a;变量名&#xff0c;函数名&#xff0c;函数功能 3.提取重复的部分&#xff0c;写成对应的函数&#xff08;…

【数据库初阶】数据库基础知识

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; 数据库初阶 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 亲爱的小伙伴们&#xff0c;大家好&#xff01;在这篇文章中&#xff0c;我们将深入浅出地为大家讲解 数据库…

汽车IVI中控开发入门及进阶(四十):FDK AAC音频编解码软件库

概述: FDK AAC是一个用于编码和解码高级音频编码格式音频的开源软件库,由Fraunhofer IIS开发,并作为Android的一部分包含在内。它支持多种音频对象类型,包括MPEG-2和MPEG-4 AAC LC、HE-AAC、HE-AACv2以及AAC-LD和AAC-ELD,用于实时通信。编码库支持高达96 kHz的采样率和多…

Python爬虫:速卖通aliexpress商品详情获取指南

在数字化时代&#xff0c;数据已成为企业竞争的关键资源。对于电商行业而言&#xff0c;获取竞争对手的商品信息是洞察市场动态、优化自身产品策略的重要手段。速卖通&#xff08;AliExpress&#xff09;作为全球知名的跨境电商平台&#xff0c;其商品信息的获取自然成为了许多…

要查询 `user` 表中 `we_chat_open_id` 列不为空的用户数量

要查询 user 表中 we_chat_open_id 列不为空的用户数量&#xff0c;你可以使用以下 SQL 查询语句&#xff1a; SELECT COUNT(*) FROM user WHERE we_chat_open_id IS NOT NULL AND we_chat_open_id ! ;解释&#xff1a; SELECT COUNT(*): 表示要计算符合条件的行数。FROM us…

学习思考:一日三问(学习篇)之匹配VLAN

学习思考&#xff1a;一日三问&#xff08;学习篇&#xff09;之匹配VLAN 一、学了什么&#xff08;是什么&#xff09;1.1 理解LAN与"V"的LAN1.2 理解"V"的LAN怎么还原成LAN1.3 理解二层交换机眼中的"V"的LAN 二、为何会产生需求&#xff08;为…