当前位置: 首页 > news >正文

Form表单._表单元素(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)

form表单及表单元素

1.表单再web网页中用来给用户填写信息,从而能采用户信息,是网页具有交互的功能
2.所有的用户输入内容的地方都是用表单来写,如登入注册,搜索框等
如:
在这里插入图片描述

1.表单是由容器和控件组成的,一个表单一般应该包含用户填写的信息的输入框,提交按钮等,这些输入框,
2.按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

表单标签Form的使用方法

<from action=“url” method=“get|post” name=“myform”></form>


属性说明action------服务器地址name------表单名称
method中Get和post的区别数据提交方式,get把提交的数据url可以看到,post看不到get一般用于提交少量数据,post用来提交大量数据

表单元素

一个完整的表单包含三个基本组成部分:表单标签,表单域,表单按钮\

  • 表单标签
  • 表单域
  • 表单按钮

代码演示

<form><input type="text"><input type="submit">
</form>

form一些常用的标签,属性及它们的功能

  • 标签及功能

  • 标签input(单标签)------在网页生成输入框

  • type属性中的submit(写在input标签里面)------在搜索框后添加一个[提交]按钮

  • 标签button------功能与属性submit相似,同样是将输入的内容传送到另一个地方

提交按钮

在这里插入图片描述

form表单------总结

  1. form是表单的容器
  2. 在容器内的统称为控件
  3. form内部需要添加表单元素
  4. 记住:input、submit、button的对应功能
  5. 表单的作用:给用户提供一个可以输入的方式------主要是提供用户与网页的交互
  6. type是表单的类型,里面不同的值,会表达不同的效果,如submit就是提供一个可[提交]的按钮/li>
  7. 按钮跳转涉及到后端知识------服务器(不懂当前不必深究)

表单元素章节

1.文本框

1.文本域通过<input type=“text”>标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域
2.还可以在标签input前面添加注意(提醒),用户需要输入的内容。

文本域代码内容
<form>You Name:<input type="text" name="You Name">You Age:<input type="text" name="You Age">
</form>
文本域页面演示

You Name:
You Age:

在这里插入图片描述

2.密码框

1.密码字段通过标签<input type=“password”>来定义
2.密码框的特点:密码字段字符不会明文显示,而是以星号或圆点替代

密码框代码内容
<form>password<input type="password" name="pwd">
</form>

密码框网页显示

password:

在这里插入图片描述

3.提交按钮

1.当用户单击确认按钮时,表单的内容会被传送到另一个文件,表单的动作属性
2.定义了目的文件的文件名。
3.由动作属性定义的这个文件通常会接收到的输入数据进行相关的处理。
4.通过submit来完成,按钮的提示文本可以用value来替换文本。

提交按钮代码内容
<form name="input" action="url" method="get">Username:<input type="text" name="user"><input type="submit" value="submit">
</form>
提交按钮网页演示

你的名字:
你的密码:
Username:

在这里插入图片描述

表单属性------总结

  • 文本域------input标签
  • 密码框------属性type的值:password
  • 提交按钮------属性type的值:submit
  • 属性type及它的值均在input标签内部------行内调用
  • 提交按钮可以用value替换提示文本文本域
http://www.dtcms.com/a/499705.html

相关文章:

  • 合肥企业做网站wap游戏中心
  • React 02
  • 营销网站定制深圳设计展2022
  • MPLS技术详解3:LDP实验与配置实践
  • 上海网站seo设计百度地图电脑版网页
  • 建设 政务数据共享网站网页搜索功能怎么实现
  • 手写Spring第4弹: Spring框架进化论:15年技术变迁:从XML配置到响应式编程的演进之路
  • [优选算法专题四.前缀和——NO.26二维前缀和]
  • 青岛做网站皆赴青岛博网站建设方案论文1500
  • SQL入门:同环比计算法全解析
  • 基于51单片机的12路病房呼叫系统设计与实现
  • Netty面试重点-2
  • 手机网站报价表贵州省住房和城乡建设部网站
  • 网站建设名深圳市seo上词多少钱
  • Vue+element ui导入组件封装——超级优雅版
  • Orleans StreamInstruments 作用分析
  • 全虚拟化、半虚拟化和SR-IOV直通-三种I/O虚拟化技术的核心差异
  • 《打造国漫唐风沉浸感:角色衣袂物理模拟的场景化技术方案》
  • 【三维分割】LangSplatV2:高维的语言3DGS,快到450+FPS
  • Kubernetes(k8s) —— 简介
  • 雅安工程交易建设网站建高级网站
  • 不止于S3:RustFS的多协议网关之路,如何平滑对接HDFS与WebDAV?
  • GIT 实战命令操作大全,代码变动,推动,修改备注,撤销(篇幅一)
  • 网站建设的 关键词家具公司网页设计
  • 蓝牙HCI指令
  • git命令——基础
  • 网站建设的总结200字wordpress长微博工具
  • Qt Q_ENUM和Q_ENUM_NS的区别?
  • 【机器人学中的状态估计】2.1 习题:证明p维高斯概率密度函数积分为1
  • 网站建设合同范本简易版邯郸有什么互联网大公司吗