`

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

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

    input样式-input

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

    HTML&CSS的思维导图笔记

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

    CSS样式学习笔记之一:基础知识

    在CSS(层叠样式表)的学习中,基础知识是构建网页美观和功能性的基石。这篇学习笔记将引导我们深入了解CSS的基本概念、选择器、盒模型、布局方式以及样式优先级等核心知识点。 首先,我们从CSS的基本概念开始。CSS...

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

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

    HTML+CSS基础教程-介绍HTML和CSS的基础知识 学习HTML基础语法、标签、CSS基础语法和选择器

    html----HTML+CSS基础教程(课件PPT版)----介绍HTML和CSS的基础知识。学习HTML基础语法、标签、CSS基础语法和选择器,以及它们的基本用法。

    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使用一系列标签来...

    WEB02-HTML&CSS-源代码.rar

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

    input多标签插件 按回车生成新的标签

    总的来说,"input多标签插件 按回车生成新的标签"涉及到前端开发中的HTML、CSS和JavaScript技术,以及事件监听、DOM操作、组件化编程等概念。通过合理的设计和实现,这样的功能可以提升用户体验,简化内容输入的过程...

    dhtml html&css.rar

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

    HTML和CSS的学习笔记

    HTML还支持创建链接(`&lt;a&gt;`标签)、列表(`&lt;ul&gt;`和`&lt;li&gt;`标签)以及表单元素(如`&lt;input&gt;`和`&lt;button&gt;`)等,这些都是构建交互式网页的基础。 CSS则是用来美化HTML文档的,它允许开发者控制颜色、字体、布局、响应...

Global site tag (gtag.js) - Google Analytics