【前端web入门第二天】02 表单-input标签-单选框-多选框

简介: 本文介绍了HTML中`<input>`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。

表单

文章目录:


作用:收集用户信息。

使用场景:

  • 登录页面
  • 注册页面
  • 搜索区域
    image.png

1.input标签基本使用

input标签type属性值不同,则功能不同。

<input type="...">

image.png

样例代码如下:

  <!-- 特点:输入什么就显示什么 -->
  文本框:<input type="text">
  <br><br>
  <!-- 特点:输入什么都是以 点 的形式显示 -->
  密码框:<input type="password">
  <br><br>
  单选框:<input type="radio">
  <br><br>
  多选框:<input type="checkbox">
  <br><br>
  上传文件:<input type="file">

效果如下:
image.png


1.1 input标签占位文本

登入界面文本框中的提示信息

 文本框:<input type="text" placeholder="请输入用户名">
 <br><br>
 密码框:<input type="password" placeholder="请输入密码">
 <br><br>

image.png


1.2 单选框 radio

常用属性:
image.png

举例代码:

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

效果如下:
image.png


1.3 多选框 checkbox

多选框也叫复选框。默认选中: checked。

举例代码如下:

兴趣爱好:
<input type="checkbox">敲代码
<input type="checkbox" checked>敲前端代码
<input type="checkbox" checked>敲前端HTML代码

效果如下:
image.png

相关文章
|
3天前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
19 0
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
1天前
|
缓存 前端开发 JavaScript
前端技术趋势:探索现代Web开发的新领域
【10月更文挑战第1天】前端技术趋势:探索现代Web开发的新领域
12 4
|
1天前
|
前端开发 JavaScript API
前端开发趋势与实践:拥抱Web Components
前端开发趋势与实践:拥抱Web Components
12 4
|
1天前
|
前端开发 JavaScript Go
前端开发趋势:从响应式设计到Web组件的探索
【10月更文挑战第1天】前端开发趋势:从响应式设计到Web组件的探索
9 3
|
1天前
|
前端开发 JavaScript 安全
前端开发趋势与实践:构建现代Web应用的探索
【10月更文挑战第1天】前端开发趋势与实践:构建现代Web应用的探索
8 2
|
2天前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
2天前
|
缓存 前端开发 JavaScript
构建高性能Web应用:优化前端性能的策略
构建高性能Web应用:优化前端性能的策略
|
28天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
34 0

热门文章

最新文章