`

HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素

    博客分类:
  • HTML
 
阅读更多

选择文件

<input>标签的[type]属性值为"file"时,表示文件选择控件,右侧的页面添加了一个文件选择控件,您可以尝试为网页添加一个文件。

我们可以用这个标签来实现上传头像,上传附件等功能。

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <link rel="stylesheet" type="text/css" href="index.css">  
  6.     <title>表单</title>  
  7. </head>  
  8. <body>  
  9. <form action="/" method="get">  
  10.     <h2>input标签 -- 选择文件</h2>  
  11.     <p><input type="file" id="file"/></p>  
  12. </form>  
  13. </body>  
  14. </html>  

这段代码就可以实现(伪)文件上传选择的功能:

 



 

 

 

隐藏元素

有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden"。

 

<input>的[type]属性值为"hidden"表示隐藏输入域。

 

这种类型的输入标签是看不见的,但是是真实存在的。这个不可见的标签的 [value] 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,可以使用这种类型的<input>标签。

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <link rel="stylesheet" type="text/css" href="index.css">  
  6.     <title>表单</title>  
  7. </head>  
  8. <body>  
  9. <form action="/" method="get">  
  10.     <h2>input标签 -- 隐藏元素</h2>  
  11.     <p><input type="hidden" id="hidden"/></p>  
  12. </form>  
  13. </body>  
  14. </html>  


看看这段代码,是不是有个东西不见了??

 

更多学习内容,就在码芽网http://www.mayacoder.com/lesson/index



 

  • 大小: 50.7 KB
  • 大小: 3.5 KB
0
0
分享到:
评论

相关推荐

    学习笔记HTML-css-JS.zip

    学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...

    HTML CSS JS 学习、git-笔记.zip

    HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...

    HeadFirst HTML&amp;CSS学习笔记.zip

    CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 Head...

    Head First HTML&amp;CSS 学习笔记.zip

    CSS 学习笔记 Head First HTML&amp;CSS 学习笔记Head First HTML&amp;CSS 学习笔记 Head First HTML&amp;CSS 学习笔记Head First HTML&amp;CSS 学习笔记 Head First HTML&amp;CSS 学习笔记Head First HTML&amp;CSS ...

    学习html&amp;css的笔记.zip

    css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp;css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp;css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp...

    CSS3复选和单选样式工具Magic-Input.zip

    只有一个input元素。在线demo源码:https://github.com/dcsite/magic-input使用$ npm install magic-input你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用...

    HTML&CSS 设计与构建网站_PDF电子书下载 带书签目录 完整版

    10. **表单(Forms)**:`&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`等元素用于用户交互和数据收集。 CSS的基础知识涵盖: 1. **选择器与声明**:CSS通过选择器(如元素名、类名、ID名)选中HTML元素,并用声明...

    html和css学习笔记

    ### HTML与CSS学习笔记 #### 一、基础知识概述 HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)是构建网页的基础技术。通过学习HTML与CSS,我们可以创建结构化且美观的网页。 - **WWW (World ...

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用,小编自己整理的李立超老师视频的笔记,手打不易,那就望您每年快乐吧。逃) 一、进制 1.十进制(日常使用): 特点:满10进1 计数:0 1 ...

    Head first HTML&CSS;.pdf

    《Head First HTML&CSS》是一本由Eric Freeman和Elisabeth Robson编写的经典教材,旨在为读者提供一种直观、高效的学习方式,深入浅出地讲解HTML和CSS的基础与高级应用。这本书之所以受到广泛赞誉,不仅在于其内容的...

    HTML&CSS的思维导图笔记

    这份“HTML&CSS的思维导图笔记”无疑是对这两个核心技术的全面梳理,对于初学者和进阶者都是极好的学习资源。 HTML是网页内容的结构语言,它定义了网页的基本元素,如标题、段落、图片、链接等。HTML由一系列的标签...

    bootstrap-file-input

    Bootstrap-File-Input插件则提供了丰富的自定义选项,如多文件选择、预览、进度条、拖放上传、文件类型限制等,使得文件上传功能变得更加友好和强大。 插件的主要特性包括: 1. **预览功能**:用户可以选择图片、...

    HTML & CSS 设计与构建网站 中文版

    学习CSS时,会接触到选择器(如元素选择器、类选择器、ID选择器),属性(如color、font-size、background-color),以及盒模型(包括内边距、边框和外边距)。浮动(float)和定位(position)是CSS布局中的关键...

    HTML_CSS学习笔记.docx

    HTML 和 CSS 是构建网页内容和样式的两大核心技术。HTML(HyperText Markup Language)是一种标记语言,用于描述网页的结构和内容。CSS(Cascading Style Sheets)则负责控制网页的呈现样式,包括颜色、字体、布局等...

    Web设计与前端开发秘籍:HTML & CSS 设计与构建网站(完整清晰版)

    书中会详细介绍选择器的用法,如类选择器、ID选择器和属性选择器,以及盒模型、定位和浮动等基础知识。你还会学习到如何使用CSS3的新特性,如Flexbox和Grid布局,这些技术可以让你构建更加灵活和响应式的网页。 这...

    零基础HTML+CSS+DIV笔记分享

    ### 零基础HTML+CSS+DIV笔记分享 #### HTML基础知识与规范 1. **标签名和属性名必须小写**:为了保持代码的一致性和兼容性,HTML5规范建议所有的标签名和属性名都使用小写字母。这样做有助于提高代码的可读性和...

    vue-tags-input:VueJS的标签输入组件

    创建后编辑标签快速设置与Vuex一起使用小尺寸:最小34kb(包括CSS)| 压缩9kb 自动补全许多定制选项自己的模板删除退格上的标签在粘贴上添加标签范例与文件安装NPM npm install @johmun/vue-tags-inputCDN [removed...

    vanilla-tags-input:创建标签输入元素的纯 JavaScript 解决方案

    用于在 DOM 中制作标签输入元素的原生 JavaScript 库。 此库没有任何依赖项,直接将其添加到您的项目中即可。 通过 npm 安装 npm install vanilla-tags-input 在节点中需要 let TagsInput = require ( 'vanilla-...

    Gallery4U 图片管理系统 v1.25 -ASP源码.zip

    解压后,你可以看到源代码文件,这些文件包括但不限于HTML、ASP、JavaScript、CSS以及可能的数据库连接文件(如DBF或SQL),它们共同构成了Gallery4U系统的运行基础。 对于开发者而言,研究ASP源码可以深入了解ASP...

    WEB02-HTML&CSS-源代码.rar

    它着重于网页设计的基础元素,特别是使用HTML结构和CSS样式来构建网页。 描述部分揭示了这个压缩包包含的具体内容: 1. **网站注册页面**:这通常涉及到HTML表单元素如`&lt;input&gt;`,`&lt;label&gt;`,`&lt;button&gt;`等,以及...

Global site tag (gtag.js) - Google Analytics