Web前端学习:HTML基础【入门宝典】3

简介: Web前端学习:HTML基础【入门宝典】

五、input及from标签


1、input标签类型和基本使用


  • text类型


输入的是一个文本


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <input type="text" name="name">
</body>
</html>

运行结果

eb262ff2165d499f96c942f12234bcd6.png



  • password类型

输入的是一个不可见的文本

<!--name可随便设置-->
<input type="password" name="pwd">


运行结果:

c2ec7ca60c194b37b2cb87a644ee2d6b.png


  • button类型


设置一个可点击的按钮

1. <!--value是显示在按钮上的信息-->
2. <input type="button" name="btn" value="点我">


运行结果:

e7eb3f937fa449d2b078391d24839464.png


  • file类型

定义输入字段和”浏览“按钮,供文件上传


<input type="file" name="uploadFile">


运行结果:


点击”选择文件“后弹出文件夹 ,供文件上传

0e0735dda1444053b824cc613d5647e1.png


  • radio类型

定义单选按钮

<input type="radio" name="radio">


运行结果:


生成一个按钮,点击变蓝


e289768796cc46ee84017d161d59729b.png

  • checkbox类型

定义复选框

<input type="checkbox" name="checkbox">读书
<input type="checkbox" name="checkbox">写字
<input type="checkbox" name="checkbox">画画
<input type="checkbox" name="checkbox">运动


运行结果:


生成一个复选框,点击后变蓝

c6169eae560d42a197d21c841baa83b3.png


2、from标签


 标签用于创建供用户输入的 HTML 表单。


元素包含一个或多个的表单元素


action属性:表单提交URL


method属性:表单提交方式(get/post)


<!--例-->
<form action="" method="get"></form>


运行结果:


10c24bd101374c99a2cb60cbd4b02b69.png

相关文章
|
9天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
10天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
11天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
3天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
15 1
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
4天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
11 3
|
8天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
XML 数据采集 前端开发
HTML+CSS入门学习
HTML+CSS入门学习
84 0
|
JavaScript 前端开发 Java
【HTML入门】从网页搭建开始学习Java Web开发
今天开始总结学习Java Web,而学习Java Web我们应该先学习一些网页搭建基础的东西,今天我们就先从HTML开始。
【HTML入门】从网页搭建开始学习Java Web开发
|
Web App开发 数据安全/隐私保护
HTML入门的简单学习
1:HTML简介    1.1:HTML(Haper Text Markup language):超文本标记语言    超文本就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素    1.2:开发工具:Adobe Dreamwearver cs5    1.
1244 0