百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

零基础学习HTML背景表单单选按钮复选框上传文件下拉列表

zhezhongyun 2025-02-15 18:17 29 浏览

HTML 背景

设置背景颜色

设置背景图片

设置页面文字颜色

颜色属性值有三种值的格式

1,英文单词,比如 red , yellow ,green …

2, 十六进制表示方式,#开头,6个十六进制的字符或数字 组合

比如:#FFFFFF,#000000,#CCCAAA,#22BCAD

十六进制: 0-9 和 a-f

3, RGB模式,红 0-255,绿 0-255,蓝 0-255

比如: RGB(120,33,234)

HTML 表单

表单是一个包含表单元素的区域。

表单能够包含 input 元素,textarea、select、fieldset、legend 和 label 元素。

表单使用标签(

)定义。

表单用于向服务器传输数据。

表单的结构

用户名:

密 码:

属性说明

name表单的名称

action表单提交地址

method表单数据提交的方式 (get ,post)

enctypeMIME类型

target打开方式

input标签

属性说明

typeinput元素类型

nameinput 元素的名称

valueinput 元素的值

sizeinput 元素的宽度

readonly是否只读

maxlength输入字符的最大长度

disabled是否禁用

1.文本框

2.密码框

3.单选按钮

4.复选框

听音乐

看电影

玩游戏

5.按钮

6. 隐藏域

隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。

7. 上传文件

注:利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

属性说明

name元素的名称

rows指定文本框的高度

cols指定文本框的宽度

select下拉列表框

属性说明

name下拉列表框的名称

size下拉列表框的显示行数

multiple是否多选

disabled是否禁用

selected设置默认选中的选项

value选项的值

optgroup标签

optgroup 元素用于组合选项 。

属性说明

label指定组合选项名称

fieldset标签

fieldset 标签作用是把表单中元素组合起来

length为字符长度

label标签

lable 标签的作用是将输入项或选项及其标签文字关联起来。

相关推荐

JavaScript中常用数据类型,你知道几个?

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型,当然这并不是JavaScr...

踩坑:前端的z-index 之bug一二(zh1es前端)

IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个:1.父标签position属性为relative;2.问题标签无posi...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:HTM...

前端代码需要这样优化才是一个标准的网站

  网站由前端和后端组成,前端呈现给用户。本文将告诉您前端页面代码的优化,当然仍然是基于seo优化的。  就前端而言,如果做伪静态处理,基本上是普通的html代码,正常情况下,这些页面内容是通过页面模...

网页设计如何自学(初学网页设计)

1在Dreamweaver中搭建不同的页面,需要掌握HTML的语句了,通过调整各项数值就可以制作出排版漂亮的页面,跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学,希望可以帮助到各位。Dre...

1、数值类型(数值类型有)

1.1数据类型概览MySQL的数据类型可划分为三大类别:数值类型:旨在存储数字(涵盖整型、浮点型、DECIMAL等)。字符串类型:主要用于存储文本(诸如CHAR、VARCHAR之类)。日期/...

网页设计的布局属性(网页设计的布局属性是什么)

布局属性是网站设计中必不可少的一个重要的环节,主要用来设置网页的元素的布局,主要有以下属性。1、float:该属性设置元素的浮动方式,可以取none,left和right等3个值,分别表示不浮动,浮在...

Grid网格布局一种更灵活、更强大的二维布局模型!

当涉及到网页布局时,display:flex;和display:grid;是两个常用的CSS属性,它们都允许创建不同类型的布局,但有着不同的用法和适用场景。使用flex布局的痛点当我们使...

React 项目实践——创建一个聊天机器人

作者:FredrikStrandOseberg转发链接:https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言...

有趣的 CSS 数学函数(css公式)

前言之前一直在玩three.js,接触了很多数学函数,用它们创造过很多特效。于是我思考:能否在CSS中也用上这些数学函数,但发现CSS目前还没有,据说以后的新规范会纳入,估计也要等很久。然...

web开发之-前端css(5)(css前端设计)

显示控制一个元素的显示方式,我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和...

2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)

获课:keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一,它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局,前端布局技术经历了...

教你轻松制作自动换行的CSS布局,轻松应对不同设备!

在网页设计中,自动换行的CSS布局是非常常见的需求,特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸,保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方...

晨光微语!一道 CSS 面试题,伴你静享知识治愈时光

当第一缕阳光温柔地爬上窗台,窗外的鸟鸣声清脆悦耳,空气中弥漫着清新的气息。在这宁静美好的清晨与上午时光,泡一杯热气腾腾的咖啡,找一个舒适的角落坐下。前端的小伙伴们,先把工作的疲惫和面试的焦虑放在一边,...

2023 年的响应式设计指南(什么是响应式设计优缺点)

大家好,我是Echa。如今,当大家考虑构建流畅的布局时,没有再写固定宽度和高度数值了。相反,小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议,小编仍然看到网站遵循自适应设计模式,其中它有...