【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…

【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;备受人们的喜爱。…

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…

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[…

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;既不能享受平台红利&#…

后端程序员入门react笔记(四)-综合运用,写一个小demo

样式模块化 有时候我们会遇到这样的问题&#xff0c;有两个css对一个class声明了样式&#xff0c;这样的话后引入的css会覆盖前面的css样式&#xff0c;导致样式冲突&#xff0c;那么我们怎么解决这种问题呢&#xff0c;我们可以使用样式的模块化&#xff0c;我们起名一个inde…

OpenHarmony驱动框架HDF中设备管理服务构建过程详解

前言 如下图&#xff0c;开源鸿蒙系统驱动框架HDF在内核中的实现&#xff0c;可以分为向用户层提供设备服务的管理模块&#xff08;Manager&#xff09;&#xff0c;和实际管理硬件的Host模块。 Manager分为DeviceManageService和 DeviceServiceManage&#xff0c;前者负责提供…

1.WEB渗透测试-前置基础知识-ip地址

ip地址&#xff1a; ip地址指的是互联网协议地址&#xff0c;是IP协议提供的一种统一的地址格式&#xff0c;以每一台联网的主机都有一个对应的ip地址&#xff0c;ip地址也可以理解为分配给用户上网使用的网际协议的设备的数字标签。通俗的来说就是你打电话时候的每个人都有自己…

在Mac上搭建MongoDB环境

最近工作中需要装MongoDB环境&#xff0c;搭建过程中遇到了一些问题&#xff0c;在这里记录一下安装MongoDB环境的方法以及问题的解决方法。有两种安装MongoDB的方法&#xff1a;brew安装和手动安装。 目录 使用Homebrew安装MongoDB 手动安装MongoDB&#xff08;不使用Homebr…

vue--两种定时任务cron表达式组件比较选择

背景&#xff1a; 使用vue页面中cron表达式的组件&#xff0c;实现定时任务参数配置。 方案1 vue-cron 安装插件 npm install vue-cron --save 全局引入&#xff0c;修改main.js import Vue from vue import VueCron from vue-cron Vue.use(VueCron);页面配置 html<el-…

Java入门-可重入锁

可重入锁 什么是可重入锁? 当线程获取某个锁后&#xff0c;还可以继续获取它&#xff0c;可以递归调用&#xff0c;而不会发生死锁&#xff1b; 可重入锁案例 程序可重入加锁 A.class,没有发生死锁。 sychronized锁 package com.wnhz.lock.reentrant;public class Sychroniz…

linux系统内核升级

1.查看旧版本内核 2.导入密钥 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 3.安装yum源 rpm -Uvh http://www.elrepo.org/elrepo-release-7.0-2.el7.elrepo.noarch.rpm4.启用elrepo-kernel仓库并安装最新内核版本 yum --enablerepoelrepo-kernel install …