`

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 设计与构建网站 中文版

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

    HTML_CSS学习笔记.docx

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

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

    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文档的,它允许开发者控制颜色、字体、布局、响应...

    css笔记课程笔记2019,5,22

    (4)使用头标签 link,引入外部css文件 - 第一步 ,创建一个css文件 - &lt;link rel="stylesheet" type="text/css" href="css文件的路径" /&gt; *** 第三种结合方式,缺点:在某些浏览器下不起作用,一般...

    学习CSS基础过程笔记

    CSS 基础知识点总结 学习 CSS 基础过程笔记是前端开发者的必备技能之一,本笔记总结了 ...学习 CSS 基础过程笔记涵盖了选择器、常见样式、布局案例、基础认知和调试技巧等多方面的内容,是前端开发者的必备技能之一。

Global site tag (gtag.js) - Google Analytics