18、前端开发:HTML知识补充——表单标签

简介: 18、前端开发:HTML知识补充——表单标签

1、HTML 表单

表单是一个包含表单元素的区域。


表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。


我们可以使用  标签来创建表单:


<form>
input元素
</form>

网页中的表单用于将本地的数据上传至服务器form的属性


action  表单要提交的服务器的地址


多数情况下被用到的表单标签是输入标签 。


输入类型是由 type 属性定义。


2、常用的输入类型

文本域(Text Fields)

       文本域通过  标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。


       实例

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

       浏览器显示如下:



1.gif

       注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。


密码字段

       密码字段通过标签  来定义:


实例

<form>
    Password: <input type="password" name="pwd">
</form>

提交按钮(Sumbmit)

       定义了提交按钮。


       当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。


       action 属性会对接收到的用户输入数据进行相关的处理:


       实例


<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
              <input type="submit" value="Submit">
</form>

浏览器显示效果如下:

1.gif

单元按钮(Radio Buttons)

       标签定义了表单的单选框选项:


       实例


<form action="">
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>

       浏览器显示效果如下:

2.png

复选框(Checkboxes)

       定义了复选框。


       复选框可以选取一个或多个选项:


        实例


<form>
    <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
    <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

浏览器显示效果如下:

1.gif

相关文章
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
173 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
261 49
|
10月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
196 6
|
10月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
268 5
|
10月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
11月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
10月前
|
存储 移动开发 前端开发
|
11月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
349 0
|
11月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
820 14
|
11月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
194 0

热门文章

最新文章