【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://www.mzph.cn/news/696773.shtml

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

相关文章

Vue状态管理库-Pinia

一、Pinia是什么&#xff1f; Pinia 是 Vue 的专属状态管理库&#xff0c;它允许支持跨组件或页面共享状态&#xff0c;即共享数据&#xff0c;他的初始设计目的是设计一个支持组合式API的 Vue 状态管理库&#xff08;因为vue3一个很大的改变就是组合式API&#xff09;,当然这…

PFA三角烧瓶实验室PFA锥形瓶本底纯净耐腐蚀性强

PFA三角烧瓶外观呈平底圆锥状&#xff0c;下阔上狭&#xff0c;有一圆柱形颈部&#xff0c;上方有一较颈部阔的开口&#xff0c;可用塞子封闭。PFA三角烧瓶也称PFA锥形瓶&#xff0c;PFA反应瓶&#xff0c;PFA三角烧瓶、PFA依氏烧瓶、PFA锥形烧瓶&#xff0c;PFA鄂伦麦尔瓶等。…

普中51单片机学习(串口通信)

串口通信 原理 计算机通信是将计算机技术和通信技术的相结合&#xff0c;完成计算机与外部设备或计算机与计算机之间的信息交换 。可以分为两大类&#xff1a;并行通信与串行通信。并行通信通常是将数据字节的各位用多条数据线同时进行传送 。控制简单、传输速度快&#xff1…

【大模型】finetune 百川2

使用官网例子finetune百川2&#xff0c;微调脚本如下 模型为baichuan_chat_13B_v1 export CUDA_VISIBLE_DEVICES1 hostfile"" deepspeed --hostfile$hostfile baichuan_fineturn/fine-tune/fine-tune.py \--report_to "none" \--data_path "baichu…

2.22号qt

1.使用信号和槽实现多个界面跳转 1.1准备两个界面 1.2第一个界面准备signal 1.3第二个界面准备slot 1.4将第一个界面的信号和槽进行连接 2.qss登录界面升级优化 2.1概念 Qss是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性&#xff…

【Python】Python实现串口通信(Python+Stm32)

&#x1f389;欢迎来到Python专栏~Python实现串口通信 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0c;希望…

springboot208基于springboot物流管理系统

基于spring boot物流管理系统设计与实现 摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。…

jax可微分编程的笔记

jax可微分编程的笔记 1.1.1 求导的基本概念 所谓的导数是一个从集合F到自身的映射. 有时,我们也将一个从函数到函数的映射称为一个操作, 这里的操作在物理学中也被称作一个算符. 但在计算机中的操作符相当于数学中的一个函数,而非从 函数到函数的映射. 应该指出的是,如果我们…

vue小记——this(2)

在Vue的方法中使用普通函数作为回调函数&#xff0c;那么在该回调函数中&#xff0c;this将不会指向Vue实例&#xff0c;而是指向全局对象&#xff08;在浏览器中是window&#xff09;。 错误 &#xff1a; export default { data() { return { message: Hello Vue! }; …

npm 包发布

name publish必填项&#xff08;version,nameverson构成唯一标识&#xff09;&#xff0c;唯一&#xff0c;所以publish前验证库里是否存在该名称&#xff0c;方式npm info xxx npm ERR! 404 cy_test is not in the npm registry.可以使用。规则&#xff1a;不能以.或者_开头…

maven工程打包引入本地jar包

1、通过maven生成本地区仓库包 mvn install:install-file --settings D:\lkx\download\apache-maven-3.6.3\conf\settings.xml -Dfileaspose-cad-21.8.jar -DartifactIdaspose-cad -DgroupIdsystem.core -Dversion21.8 -Dpackagingjar -DgeneratePomtrue # --settings&#xf…

进程线程间的通信:2024/2/22

作业1&#xff1a;代码实现线程互斥机制 代码&#xff1a; #include <myhead.h>//临界资源 int num10;//创建一个互斥锁 pthread_mutex_t mutex;//任务一 void *task1(void *arg) {//获取锁资源pthread_mutex_lock(&mutex);num123;sleep(3);printf("task1:num…

PacketSender-用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序

PacketSender-用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序 PacketSender是一款开源的用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序&#xff0c;作者为dannagle。 其官网地址为&#xff1a;https://packetsender.com/&#xff0c;Github源代码地址&#xff1a;htt…

【AI绘画工具分别有哪些?】

目前有许多AI绘画工具可供选择&#xff0c;以下列举了一些常见的AI绘画工具&#xff1a; 1. DeepArt.io&#xff1a;该工具使用深度学习算法生成艺术风格的图像&#xff0c;并可以将输入图像与指定的艺术风格进行合并。 2. Prisma&#xff1a;这是一款非常流行的AI绘画应用&a…

SQL Server —— While语句循环

一&#xff1a;简介 while 循环是有条件的循环控制语句。满足条件后&#xff0c;再执行循环体中的SQL语句。 while: break, 如果有多条语句可以在while后面添加begin-end。关于while的语法 while(条件) -- begin -- 语句1 -- 语句2 -- break 根据情况是否添加break -- end 二…

leetcode日记(32)字符串相乘

做了很久很久……真的太繁琐了&#xff01;&#xff01; class Solution { public:string multiply(string num1, string num2) {string s;string str;if (num1 "0" || num2 "0") return "0";for(int inum2.size()-1;i>0;i--){int c2num2[…

Open CASCADE学习|全局属性

目录 1、概念解释 质心&#xff1a; 重心&#xff1a; 惯性矩&#xff1a; 惯性矩阵&#xff1a; 主惯性矩&#xff1a; 静态惯性矩&#xff1a; 2、API 1、概念解释 质心&#xff1a; 质心是质量中心的简称&#xff0c;指物质系统上被认为质量集中于此的一个假想点。…

Qt:tabWidget控件

一、tabWidget用来做什么 tabWidget控件用来进行不同控件页面的跳转&#xff0c; 二、控件的一些函数功能 添加一个页面&#xff0c;返回index int addTab(QWidget *widget, const QString &); int addTab(QWidget *widget, const QIcon& icon, const QString &…

pytest教程-11-初识fixture

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了使用allure生成html测试报告的方法&#xff0c;本小节我们讲解一下pytest fixture测试夹具的使用方法。 前言 在做自动化的过程中&#xff0c;编写用例时候需要用到用例的前置和用例的后置&a…

2024年了,抖店还能做吗?适合新手吗?

我是电商珠珠 现在已经24年了&#xff0c;抖店也已经发展了四年了。其中有很多在门外观望的人&#xff0c;还在犹豫不决。认为抖店发展到今天&#xff0c;所有的红利早已在20年的时候就消失殆尽了&#xff0c;特别是没有经验的如果入驻了&#xff0c;既不能享受平台红利&#…