【html学习笔记】3.表单元素

1.文本框

1.1 语法

<input type = "text">表示文本框。且只能写一行
在这里插入图片描述

1.2 属性

  1. 使用属性size 设置文本框大小
<input type="text" size="10">


2. 使用属性value 来设置文本框的默认文字

     <input type="text" size="30" value = "显示在文本框里的初始值">

在这里插入图片描述

  1. 使用属性placeholder来设置文本框的背景文字
       <input type="text" size="30" placeholder = "请输入账号">

在这里插入图片描述

2.密码框

表示方法:

<input type="password"> 

使用密码框时会自动将输入的内容转换为星号
在这里插入图片描述

3.表单

表单用于搜集不同类型的用户输入。
表单的表示方式是<form>
表单用于向服务器提交数据,比如用户名和密码等。

表示将数据提交到服务端的login.jsp里面了

<form action="login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

在这里插入图片描述

提交数据的方式

<form>中提交数据的属性有两种,一种是 method=“get” ,一种是method=“post”

  • method=“get”
    是默认的提交表单数据的方式。如果没有指定的话一般采用这种
    get方式可以在地址栏中看到提交的数据。即使是密码也可以看到
<form method="get" action="login.jsp">

在这里插入图片描述

  • method=“post”
    post提交表单需要指定
    而且使用 post提交表单时不会显示出密码
<form method="post" action="login.jsp">

在这里插入图片描述

4.单选框

<input type = "radio">表示单选框

<html><body>星期一<input type = "radio">星期二<input type = "radio">  星期三<input type = "radio">星期四<input type = "radio">  星期五<input type = "radio">星期六<input type = "radio">  星期日<input type = "radio">  
</body> 
</html>

在这里插入图片描述

默认选中

默认选中,需要增加属性checked=“checked” 选项

 	星期一<input type = "radio" checked="checked" >星期二<input type = "radio">  星期三<input type = "radio">星期四<input type = "radio">  星期五<input type = "radio">星期六<input type = "radio">  星期日<input type = "radio">  

在这里插入图片描述

一堆中只能选中一个

单选框一次能选中好几个选项,如果想要在一堆单选框里只能选中一个的话,则需要进行分组。
分组需要增加一个属性name,表示一组数据即name属性相同。
此时就只能在name相同的属性里选择一个了。

<html><body>星期一<input type = "radio" name = "week" checked="checked" >星期二<input type = "radio" name = "week">  星期三<input type = "radio" name = "week">星期四<input type = "radio" name = "week">  星期五<input type = "radio" name = "week" >星期六<input type = "radio" name = "week">  星期日<input type = "radio" name = "week">  
</body> 
</html>

在这里插入图片描述

5.复选框

复选框用<input type= "checkbox">表示

  <body><p>这个周哪几天需要上班?</p>星期一<input type = "checkbox">星期二<input type = "checkbox" >  星期三<input type = "checkbox" >星期四<input type = "checkbox" >  星期五<input type = "checkbox" >星期六<input type = "checkbox" >  星期日<input type = "checkbox" >  
</body> 

在这里插入图片描述

6 下拉列表

在HTML中,下拉列表需要<select><option>两者配合使用

         <select><option>星期一</option><option>星期二</option>  <option>星期三</option><option>星期四</option>  <option>星期五</option><option>星期六</option>  <option>星期日</option></select>

在这里插入图片描述

设置下拉列表的高度

在select后增加属性size
<select size = "7" ><size>
在这里插入图片描述

设置下拉列表可以多选

需要使用键盘上的shift键

在select后增加属性multiple
<select size = "7" multiple = "multiple"><size>
在这里插入图片描述

7.文本域

文本域用<textarea>表示
与文本框不同的是,文本域可以显示多行数据。
在这里插入图片描述

指定长度和宽度

<textarea>增加属性cols和rows

<html><body><textarea cols = "30" , rows = "7">星期一星期二  星期三星期四  星期五星期六  星期日</textarea>
</body> 
</html>

在这里插入图片描述

8.普通按钮

普通按钮的表示方式是<input type="button">
普通按钮不能提交表单

         <input type="button" value = "普通按钮"> 

在这里插入图片描述

9.提交按钮

<input type = "submit">是提交按钮。可以把数据提交到服务器

<form method="get" action="login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

在这里插入图片描述

10.重置按钮

<input type = "reset">是重置按钮。可以把文本框里的内容清空

<form method="get" action="login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
<input type="reset" value="重置">
</form>

在这里插入图片描述

11.图像提交

<input type="image" > 是使用图像作为提交的表示方式

<input type="image" src="picture.jpg">

在这里插入图片描述
在这里插入图片描述

12 按钮

<button></button>是按钮标签
按钮标签中可以是图片,也可以是文字。
在按钮标签中添加属性type=“submit,那么按钮也具有提交表单的功能

button中是文字

<button>登陆</button>

在这里插入图片描述

button 的图片属性

<button><img src="picture.jpg"/>登陆
</button>

在这里插入图片描述

button的type属性

<form method="get" action="login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>

在这里插入图片描述

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

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

相关文章

动态规划算法学习(基础)

做题步骤&#xff1a; 确定dp数组的含义(一维或者二维) 获取递推公式 dp数组如何初始化 确定遍历顺序 打印dp数组&#xff08;检查&#xff09; 题目&#xff1a; 1. 斐波那契数 509 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 …

Jenkins2.426邮件通知配置

之前安装的jenkins出现问题了&#xff0c;重新装了jenkins&#xff0c;需要重新配置&#xff1a;Maven&#xff0c;JDK&#xff0c;Allure报告&#xff0c;邮件通知&#xff0c;Extended E-mail Notification等 配置Maven&#xff0c;JDK参考&#xff1a;CICD集合(四):Jenkins…

美团面试:说说Java OOM的三大场景和解决方案?

美团面试&#xff1a;说说Java OOM的场景和解决方案&#xff1f; 尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&…

常用的函数式接口(Supplier、Consumer、Predicate、Function)

目录 一.函数式接口作为方法的参数 二.函数式接口作为方法的返回值 三.常用的函数式接口 3.1生产型Supplier接口 3.2消费型Consumer接口 抽象方法&#xff1a;accept 默认方法&#xff1a;andThen 3.3判断型Predicate接口 抽象方法&#xff1a;test 默认方法&#xf…

【Unity】如何使用Spine动画

1.下载&#xff0c;选择自己需要的版本下载 下载链接&#xff1a;http://zh.esotericsoftware.com/spine-unity-download 2.下载完&#xff0c;导入Unity里 3.把美术文件拖入Unity里&#xff0c;会自动生成Spine数据 ①_Atlas 文件是texture atlas文件 (.atlas.txt). 它包含对…

5分钟让你搞懂什么是Http协议

计算机网络基础课程是计算机专业方向非常重要的一门功课。 所有的互联网都通过网络协议来建立通信连接。 而http协议又是一种无状态的协议&#xff0c;也是工作中最常用的一种基于Web浏览器的网络通信协议。 如何学习http协议&#xff1f;提供三种方法供参考&#xff1a; 第…

liunx文件权限和内核

liunx文件权限和内核 liunx内核liunx权限liunx用户用户的切换liunx文件权限属性liunx文件默认权限liunx文件权限的粘滞位 liunx内核 liunx内核模拟图 在liunx中内核可以想象成一堆软件。由于内核过于复杂&#xff0c;我们并不想直接操作内核。因为内核1. 内核过于复杂&#x…

为什么0.1+0.2不等于0.3

一、JS内部的计算是以二进制形式进行的 js里整数和小数转为二进制形式的方法是不一样的&#xff1a; 二、Number类型使用IEEE754标准64位存储 双精度浮点数&#xff08;double类型&#xff09;为每个数分配64位空间&#xff0c;并以科学计数法的方式存储&#xff1a; 那么对于…

iOS整理 - 关于直播 - 搭建服务端

前言 其实本人一直都想自己简单做一套直播&#xff08;包括移动端和服务端&#xff09;的开发测试&#xff0c;但是之前一直做得比较迷茫。最近偶然间在来了灵感&#xff0c;瞬间解除了我很多疑惑。我会分享出来&#xff0c;希望大家一起研究下。稍后&#xff0c;我完整做好了…

链表和顺序表的优劣分析及其时间、空间复杂度分析

链表和顺序表的优劣分析及其时间、空间复杂度分析 一、链表和顺序表的优劣分析二、算法复杂度<font face "楷体" size 5 color blue>//上面算法的执行次数大致为&#xff1a;F&#xff08;N&#xff09; N^22*N10;   N 10,F(10) 1002010 130次   N 1…

软件提示找不到MSVCP140.dll是什么意思,修复MSVCP140.dll丢失的多个方法

msvcp140.dll 文件是 Microsoft Visual C 运行时库的一部分&#xff0c;具体来说它是 Visual Studio 2015 版本编译的C应用程序所依赖的一个动态链接库&#xff08;DLL&#xff09;文件。这个 DLL 文件包含了大量由Microsoft开发的标准C库函数&#xff0c;这些函数对于许多在Wi…

python实现维特比算法

对于维特比算法,首先想到的就是高通公司,对于现在的通信行业的两大巨头公司之一,高通公司的发家是由器创始人维特比发明了一种高效的通信解码技术,维特比算法。 对于维特比算法是什么,以一个例子来讲述什么是维特比算法,假设由一个村庄,某村民的身体在每天只会出现3种,…

服务器内部大揭秘(CPU、内存、硬盘)

晚上好&#xff0c;我的网工朋友。 服务器作为网络的节点&#xff0c;存储、处理网络上80&#xff05;的数据、信息&#xff0c;被称为互联网的灵魂。 它不仅是一个简单的机器&#xff0c;更像是一个精密的工程&#xff0c;由多个关键组件相互配合&#xff0c;以实现高效的数…

集合、List、Set、Map、Collections、queue、deque

概述 相同类型的数据进行统一管理操作&#xff0c;使用数据结构、链表结构&#xff0c;二叉树 分类&#xff1a;Collection、Map、Iterator 集合框架 List接口 有序的Collection接口&#xff0c;可以对列表中的每一个元u尿素的插入位置进行精确的控制&#xff0c;用户可以根…

数据库面试题汇总,助你轻松应对面试!

考虑到最近有些小伙伴准备跳槽&#xff0c;所以更新一些数据库相关的面试题&#xff0c;希望能帮到大家&#xff01; 一 请写出创建表的基本语法结构&#xff1f; 创建表的基本语法结构如下&#xff1a; CREATE TABLE IF NOT EXISTS 表名(字段名1 字段类型,字段名2 字段类型 …

哪个蓝牙耳机好用?2024最新蓝牙耳机选购指南,实测避坑!

​蓝牙耳机已成为现代生活中不可或缺的一部分。无论你是追求高品质音质、注重佩戴体验&#xff0c;还是在意性价比&#xff0c;市场上总有适合你的那一款。希望通过我的推荐和分析&#xff0c;你能找到一款真正适合自己的蓝牙耳机&#xff0c;让你的音乐之旅更加精彩。 一、选购…

【2024软件测试面试必会技能】Charles(6):Charles设置弱网

设置弱网&#xff08;慢网速&#xff09; 方法一&#xff1a;点击Charles 上方的乌龟标志&#xff0c;模拟网络延迟&#xff1b; 方法二&#xff1a;点击Proxy——Throttle Settings——勾选Enable Throttling——再勾选Only for selected hosts——点击Add,设置指定的域名——…

【Vuforia+Unity】AR05-实物3D模型识别功能实现(ModelTarget )

不管是什么类型的识别Vuforia的步骤基本都是&#xff1a; 把被识别的物体转成图、立体图、柱形图&#xff0c;3D模型、环境模型&#xff0c;然后模型生成Vuforia数据库-导入Unity-参考模型位置开始摆放数字内容&#xff0c;然后参考模型自动隐藏-发布APP-识别生活中实物-数字内…

kettle计算增长率

kettle计算增长率 问题描述处理方法 问题描述 读取一段时间内的数据记录&#xff0c;计算相邻记录的比率 iddatevalue12024-01-0110012024-01-0211012024-01-0312012024-01-0490 处理方法 1.使用统计中的分析查询节点能在每一行中添加前后行的数据 2.使用计算器节点计算比…

蓝牙耳机哪个品牌质量好?2024超高性能机型比拼推荐

​无线耳机已经成为现代生活中的必备数码产品&#xff0c;尤其在感受到无线带来的自由后&#xff0c;很难再适应有线耳机的束缚。因此&#xff0c;耳机市场竞争激烈&#xff0c;各种类型和外观的耳机层出不穷。在此&#xff0c;我为大家总结了五款使用体验很不错的蓝牙耳机&…