表单的一些基本知识

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

表单

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

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


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>
相关文章
|
6月前
|
Web App开发 移动开发 前端开发
初探前端世界:网页基本结构入门指南
初探前端世界:网页基本结构入门指南
103 0
初探前端世界:网页基本结构入门指南
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
5月前
|
前端开发
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
HTML的基本知识(七)——表单的基本知识及案例
HTML的基本知识(七)——表单的基本知识及案例
|
JSON JavaScript 前端开发
Extjs数据展现原理
Extjs数据展现原理
|
前端开发 JavaScript 数据处理
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
|
前端开发
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
WebApi入门第四章(多选框小练习 )
WebApi入门第四章(多选框小练习 )
94 0
WebApi入门第四章(多选框小练习 )

热门文章

最新文章