表单的一些基本知识

简介: 表单的一些基本知识

表单

作用:收集数据,收集客户信息

包括两部分:表单域和表单控件


1.表单域


form,叫表单域,里面存放表单控件

表单内还有表单控件 input,他属于空标记,添加表单控件的其中一个标签,通过type属性的属性值来显示不同的表单控件

form 可以嵌套其他的标签,例如table


Form属性action、method、name,

所有的标签都有name属性,但是form中的name属性是必选项,没有name,后期是无法进行提交的


2.表单控件


表单控件属性:

type 表单控件类型选择

value 是表单内容的初始值、默认值

placeholder 添加提示信息

checked 默认选中属性,属性值和属性名相同;用于单选框或者多选框

disabled 禁止选中;属性名和属性值相同,设置后无法选中;用于单选框或者多选框或者输入框

name 所有标签都默认存在的属性,只是在表单中该属性必须设置,否则上传数据有误;下拉菜单中非必须

id 设置的id名


注:按钮 按钮标签 本质和 一样,建议使用input


type 表单控件的类型;

包括:

text 文本输入框;账户输入

password 密码框

reset 重置按钮

button 空标签

submit 提交按钮

radio 单选按钮(单选框);默认无法只能选一个,并且选中后无法取消

方案:通过name属性去判断这几个单选框是不是属于一个组的,一个组会只能选一个

name一致则是一个组的,需用英文命名

checkbox    复选框;可以同时选中多个,也可取消
file        上传文件按钮
hidden      隐藏表单元素;主要用于储存内容,不会在浏览器内显示,常用于交互验证

3.下拉菜单


他的默认选中属性是selected,加在option

selcect加size属性会变成列表,一般不用


出生日期: 1991 1992 1993 年


4.多行文本框,评价或者留言这种,可以理解就是可以输入多行文本的输入框


rows 行数

cols 列数

但是一般不用行数和列数去设置,因为框会动,常用直接使用class名后用css设置

去除可拖拽属性 {resize:none;}在css设置

vertical-align 设置文字垂直


5.表单标签(补充)


(1)

表单字段集

说明:相当于一个方框,在低端机中科院包含文本和其他元素。该元素对于表单中的元素进行分组并在

在文档中区别标出文本。

fielset元素可以嵌套,其内部可以在设置多个fielset对象。disabled定义空间禁制可用


特点:可以嵌套,自己或者其他元素;自带边框

作用:给表单元素划分区域,或者进行分组

注:他是写在表单内的;

由于本身自带一些样式属性,比如说边框可以先设置border:none,再去设置border-top


(2)

字段集标题

说明:该元素可以在fieldset对象绘制的方框内插入一个标题;legend袁术必须是fieldset内的

唯一一个legend元素

align=“left/center/right/justify” 设置的是legend的位置,还会设置到内部内容对其

如果单纯想将标题改变对其方式可以使用padding


(3)


说明:该元素用来定义标签,为页面上的其他元素指定提示信息,要将label袁术绑定到其他的控件上,可以将

label元素的for属性设置为与该控件id属性值相同;

一般在左边提示文字加上后,导致表单控件无法对其的解决方法是给label标签加样式,转换行内块元素,加统一宽度再去设置对齐


–>

<form action="" method="" name="">
  <!-- 表单控件最好用div或者p(p自带行间距)标签包裹起来,这样块元素独占一行,尽量避免使用br标签 -->
  <div>账号<input type="text" placeholder="我是提示信息" /></div>
  <div>密码<input type="password" disabled="disabled" /></div>
  <!-- 自带默认value是重置,需要换字体就设置value属性 -->
  <p><input type="reset" /></p>
  <!-- button  空标签 -->
  <p><input type="button" /></p>
  <!-- 自带默认value是提交,需要换字体就设置value属性 -->
  <p><input type="submit" value="安全登录" /></p>
 
  <p>
    你的性别是 <input type="radio" name="sex" id="" checked="checked" />男
    <input type="radio" name="sex" id="" />女
  </p>
  <p>
    <input type="checkbox" checked="checked" />音乐
    <input type="checkbox" />足球
    <input type="checkbox" disabled="disabled" />游泳
  </p>
 
  <p>
    请上传文件
    <input type="file" name="" id="" />
  </p>
  <p>
    出生日期:
    <select>
      <option value="">请选择</option>
      <option value="" selected="selected">1991</option>
      <option value="">1992</option>
      <option value="">1993</option>
    </select>
  </p>
 
  <p>请留言<textarea name="" rows="3" cols="10"></textarea></p>
  <fieldset>
    我是fieldset,可以嵌套
    <fieldset>里面的</fieldset>
  </fieldset>
</form>
 
<form action="">
  <fieldset class="fiew">
    <legend align="left">详细信息</legend>
    <p>地址<input type="text" name="" id="" /></p>
    <p>
      <label for="times">时间</label>
      <input type="text" name="" id="times" />
    </p>
  </fieldset>
  <fieldset disabled="disabled">
    <p>
      <label for="names" class="lab">账号</label>
      <input type="text" id="names" />
    </p>
    <p>
      <label for="psd" class="lab">微信密码</label>
      <input type="text" id="psd" />
    </p>
  </fieldset>
</form>
相关文章
|
2天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现,而持久性则依赖于事务日志中的`Redo Log`。在MySQL中,`Redo Log`确保已提交事务的数据能持久保存,即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改,待事务提交时写入磁盘。此外,`Redo Log`采用简单的物理日志格式和高效的顺序IO,确保快速提交。通过不同的落盘策略,可在性能和安全性之间做出权衡。
1519 4
|
29天前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
5天前
|
人工智能 Rust Java
10月更文挑战赛火热启动,坚持热爱坚持创作!
开发者社区10月更文挑战,寻找热爱技术内容创作的你,欢迎来创作!
503 19
|
2天前
|
存储 SQL 关系型数据库
彻底搞懂InnoDB的MVCC多版本并发控制
本文详细介绍了InnoDB存储引擎中的两种并发控制方法:MVCC(多版本并发控制)和LBCC(基于锁的并发控制)。MVCC通过记录版本信息和使用快照读取机制,实现了高并发下的读写操作,而LBCC则通过加锁机制控制并发访问。文章深入探讨了MVCC的工作原理,包括插入、删除、修改流程及查询过程中的快照读取机制。通过多个案例演示了不同隔离级别下MVCC的具体表现,并解释了事务ID的分配和管理方式。最后,对比了四种隔离级别的性能特点,帮助读者理解如何根据具体需求选择合适的隔离级别以优化数据库性能。
179 1
|
8天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】,涵盖本月产品和功能发布、活动,应用实践等内容,帮助您快速了解阿里云百炼产品的最新动态。
阿里云百炼产品月刊【2024年9月】
|
21天前
|
存储 关系型数据库 分布式数据库
GraphRAG:基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统,结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性,并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件,实现图数据和向量数据的统一存储与检索,提升了RAG系统的性能和效果。
|
9天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
457 5
|
7天前
|
存储 人工智能 搜索推荐
数据治理,是时候打破刻板印象了
瓴羊智能数据建设与治理产品Datapin全面升级,可演进扩展的数据架构体系为企业数据治理预留发展空间,推出敏捷版用以解决企业数据量不大但需构建数据的场景问题,基于大模型打造的DataAgent更是为企业用好数据资产提供了便利。
314 2
|
23天前
|
人工智能 IDE 程序员
期盼已久!通义灵码 AI 程序员开启邀测,全流程开发仅用几分钟
在云栖大会上,阿里云云原生应用平台负责人丁宇宣布,「通义灵码」完成全面升级,并正式发布 AI 程序员。
|
25天前
|
机器学习/深度学习 算法 大数据
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
2024“华为杯”数学建模竞赛,对ABCDEF每个题进行详细的分析,涵盖风电场功率优化、WLAN网络吞吐量、磁性元件损耗建模、地理环境问题、高速公路应急车道启用和X射线脉冲星建模等多领域问题,解析了问题类型、专业和技能的需要。
2608 22
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析