`

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...

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

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

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

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

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

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

    html + css 学习笔记整理.zip

    HTML和CSS是构建和设计网页的基础技术。HTML(超文本标记语言)负责网页内容的结构,而CSS(层叠样式表)则负责网页内容的呈现。在现代网页开发中,它们的作用不可或缺,无论是简单的个人博客还是复杂的商业网站,都...

    input样式-input

    在Web开发中,`&lt;input type="file"&gt;` 元素被广泛用于让用户选择文件进行上传。然而,默认情况下,不同浏览器提供的文件输入框样式存在差异,这不仅影响了用户体验的一致性,还可能与网站的整体设计风格不匹配。因此...

    Head first HTML&CSS;.pdf

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

    HTML&CSS的思维导图笔记

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

    HTML_CSS学习笔记.docx

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

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

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

    html css js全套学习笔记+举例

    尚硅谷的课程可能涵盖了HTML的基本标签用法,CSS的选择器和布局模式,以及JavaScript的基础语法和DOM操作。通过笔记和实例的实践,你可以逐步理解并掌握这些概念,从而从零开始建立起前端开发的能力。 在实际应用中...

    HTML&CSS自学笔记大全

    HTML和CSS是构建网页的基础,它们分别负责网页的结构和表现。HTML(HyperText Markup Language)是超文本标记语言,它的主要任务是描述网页的结构,就像人体的骨架一样,为网页提供基本框架。HTML使用一系列标签来...

    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;`等,以及...

    dhtml html&css.rar

    HTML是网页结构的基础,用于定义页面元素的标签和属性,而CSS则负责元素的样式和布局,使得网页设计更加灵活和美观。 在DHTML中,JavaScript起到了关键作用,它可以响应用户的操作,改变HTML元素的属性,或者通过...

Global site tag (gtag.js) - Google Analytics