表单元素

每个表单都对应一个<form></form>标签    表单内所有元素都写在 <form></form>里面；

1.最重要的属性

<form      属性     >表单的所有信息都写在这里面</form>

action属性  规定了 提交的地址 action=“网址”

Method属性  规定了 提交方式

method=“get”   传值有长度限制   能看到传值内容

method=“post” 没有长度限制    不能看到传值内容

<form  action="上传地址"  method=”上传方式“>

         表单元素

</form>

标签名 单标签   <input    />     表单元素都有  name   value

全部用 <input    />  只是用  type 给他们区别

---------------------------------------------------------------------------------------------------------------------------------

1 文本类

文本输入   <input type=”text”  name=”名字” value=”文本框中的内容默认值”/><br />

密码输入(输入内容自动变为特殊字符)  <input  type=”password” name=“名字” value=“默认值”/>

★隐藏域     <input  type=“hidden”name=“” value=“”/>  在界面上看不到  （不想让人看到但是必须提交）

♥特殊 不是单标签♥文本域    双标签   元素的值 放在 中间  当作内容  取值和赋值和和其他表单没有任何区别  只是在代码中有所区别（后期通过样式表控制文本域的大小）

<testarea  name=“”>  内容<testarea/>

2,按钮累

普通按钮<input type=”button” value=”显示内容”/>

提交按钮 <input type=”submit” value=“显示内容”/>

点击后界面自动跳转到《action提交地址》使用《method属性提交》

图片按钮（作用 是提交） <input type=”img” src=”图片地址” width=“”height=“” />

重置按钮 <input type=”reset” value=“显示内容”/>

3.选择输入类

单选按钮 <input  type=“radio”name=“qwe”；value=“提交的内容”/>男

单选按钮组（几个单选按钮组的name值相同）

单选按钮组<input  type=“radio”name=“sex” value=“提交内容”/>男

单选按钮组<input  type=“radio”name=“sex” value=“提交内容”/>女

多选按钮（复选框）特殊注意以后还讲

<input type=”checkbox” name=“aihao”value=“显示内容”/>

<input type=”checkbox” name=“aihao”value=“2323”/>

下拉列表  特殊 双标签♥特殊 不是单标签♥

<select name=”minzu”>

<option  value=“001”>汉族<option/>

<option  value=“002”>回族<option/>

</select>

4.选择文件  （以后还讲）

选择文件<input  type=”file”/>

可以用在所有表单

Readonly 只读

Disabled  不可用可以加在所有 表单里

Hidden  隐藏

require 必选项

Checked   默认选中  用在复选框 单选框里用来做选中

Selected   默认选中  在下拉列表里使用

总结

有value 值则提交value值  没有则提交 尖括号外的文字；

根据type不同  划分不同的 功能

属性   name   所有的表单力都可以写     除了按钮类其他的必须都要写

属性   value   所有的表单力都可以写 按钮必须要写value（显示文字） 文本类的 value                 为提示信息可写可不写

---------------------------------------------------------------------------------------------------------------------------------

<!--  --> 注释   *代表所有！

1.框架

<iframe   src=”网页的地址” width=“” height=“” frameborder=“1” scrolling=“no”></iframe>

边框           是否有滚动条

使用<ifram></iframe>可以把 网页隐藏掉（宽高都为0） 但是仍然运行

2.<frameset></frameset> 完全的框架页面  取代body   （没有body）

<frameset  cols=“300,700,*”>（cols 表示横向嵌入网页；同样rows 表示纵向嵌入网页）

<frame src=“网页地址”></iframe>

<frame src=“网页地址”></iframe>

<frame src=“网页地址”></iframe>

</frameset>

可以嵌套

---------------------------------------------------------------------------------------------------------------------------------

添加

3.<marquee direction（方向）=“”>滚动效果(此处也可以换成图片)</marquee>

4.mark标签快速关键字标记：<span><mark>苹果</mark>公司发布新手机</span>

5.单标签元素：分割线：<hr  />

6.找到视频  点击分享   复制HTML代码 或者复制通用代码  粘贴到网页里面   就可以引入视频：    HTML5 里面有个value标签 引入视频

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

样式表：CSS

1.内联样式：写在标签里面的样式

 <div style=”color：red；width：30px;”>sssssssssssssssssssss</div>

         注意  冒号 使用

　　         控制精确   代码重用性很差    页面代码乱

2.内嵌样式：写在head标签内部

<head>
<style type=”text/css”>

*

{

  background-color：red；

}

</style>


</head>

代码重用性好   控制不精确

3.外部样式表：  写在css里面 css里面全都是写样式的

可以对所有页面相同的标签同时适用  代码重用性最好

缺点 ：控制最不精确；  重点

方法  ：先使用内嵌的  测试好之后再使用 再复制到CSS 里面

优先级 ：  内联最高   内嵌其次   外部样式表和内嵌的差不多

样式格式：

样式的名：样式的值

多个样式之间用分好(;)分割：

<div style=”color:red;height:300px;”></div>

--------------------------------------------------------------------------------------------------------------------------------

选择器  准确控制  方法    注释语法/* 注释 */

1. *{} 选择器    *表示所有

2.  ID选择器   #名字{样式}    （只能用  数字字母 或下划线开头 名字不能重名）

一个ID名只能用一次

3.  Class选择器 （同一类 ）   .名称{样式}  一个样式可以用多次

4.  标签选择器     span{}    div{}

选择器的优先级： ID 选择器>class选择器>标签选择器 >*选择器

------------------------------------------------------------------------------------------------------------------------------------------------------

复合选择器

1.并列选择器： div，span{}  两个选择器同时使用一个样式（逗号表示并列）

2.后代选择器：  <div class=”3”>                  （空格表示后代）

<div>后代1</div>

<div>后代2</div>

</div>

3.   . 代表筛选       div.3{}      只能大范围内筛选class

<div class=”3”> </div>(被选出的一项)

<div>后代1</div>

<div>后代2</div>

HTML 表单 选择器的更多相关文章

  1. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  2. JQuery_表单选择器

    表单作为HTML 中一种特殊的元素,操作方法较为多样性和特殊性 开发者不但可以使用之前的常规选择器或过滤器,也可以使用jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素. 一.常规选择器 ...

  3. jquery表单选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器

    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...

  5. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  6. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  7. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  8. 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. jQuery的表单选择器

    1.常规选择器选择表单标签 $(function () { // var a = $("input").eq(0).val() // alert(a) // // var b = ...

  10. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

随机推荐

  1. 微信获取nickname中存在Emoji导致保存为空问题的解决

    微信开发时候,有些用户使用Emoji表情作为用户昵称,导致数据库保存昵称时候不识别导致昵称为空,现在提出以下解决方案: /** +----------------------------------- ...

  2. 使用Minify来优化网站性能

    Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能.它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的 ...

  3. 关于QString::toWCharArray 无法解析的外部符号

    1>CommManger.obj : error LNK2019: 无法解析的外部符号 "public: int __thiscall QString::toWCharArray(un ...

  4. CSS这些代码你都不会，你还有什么好说的！！！

    都说自己工资低的,先看看这些代码你能写出来不?这些都不会,你还嫌工资? 很多人抱怨工资低,觉得自己大材小用,但你真的是才不是柴嘛?? 经常听到一些人,遇到不会的问百度,如果这样,我们都不用学习了,天天 ...

  5. Linux统计文件行数

    语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. 该命令各选 ...

  6. mysql python image 图像存储读取

    最近做一些数据库调研的工作,目标是实现影像更快的入库.出库.查询,并实现并行访问等操作. 将结果总结成一个mysqlImg类. 关于mongodb的图像存储,参见http://www.cnblogs. ...

  7. Effective Java 学习笔记之所有对象都通用的方法

    一.覆盖equals时请遵守通用约定 1.满足下列任何一个条件时,不需要覆盖equals方法 a.类的每个实例本质上都是唯一的.此时就是Object中equals方法所表达的含义. b.不关心类是否提 ...

  8. 4 个最好的 Linux 引导程序

    导读 当你打开你的机器,开机自检(POST)成功完成后,BIOS(基本输入输出系统)立即定位所配置的引导介质,并从 MBR(主引导记录)或 GUID(全局唯一标识符)分区表读取一些命令,这是引导介质的 ...

  9. leetcode 100. Same Tree

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  10. 粒子系统模块（Particle System Modules40）

    粒子系统模块(Particle System Modules40) 粒子系统模块(忍者飞镖) 粒子系统(忍者飞镖)(Particle System (Shuriken)) 用模块描述粒子一段时间内的行 ...