表单元素

每个表单都对应一个<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. android 读取SQLite android could not open the database in read/write mode错误

    由于AndroidManifest.xml文件中uses-permission没有设置权限问题 <uses-permission android:name="android.permi ...

  2. 数论只会GCD。。。

    一些关于GCD的代码.... #include <iostream> #include <cstdio> #include <cstring> using name ...

  3. 【C语言入门教程】5.3 函数的调用 与 参数

    函数通过调用获得程序的控制权,函数的参数是调用者与函数的数据接口.函数可以定义一个或多个参数,也可以省略参数,调用时将与参数的数据类型相匹配的数据置于参数列表中,即可在函数体内使用.参数的调用有多种形 ...

  4. 中国天气预报数据API收集

      {"weatherinfo":{"city":"北京","cityid":"101010100" ...

  5. Javascript高级程序设计——面向对象之创建对象

    对象创建方法: 工厂方法 构造函数模式 原型模式 组合构造函数和原型模式 寄生构造函数模式 问题构造函数模式 工厂模式: function Person(name, age){ var obj = n ...

  6. phpcms学习的一点心得

    最近,在学习phpcms的二次开发,因为要调试搜索模块程序,需建立若干栏目,按照栏目搜索.这一过程中涉及到phpcms的一个概念:模型. 以前并不太注意这个东东. 经过摸索,发现模型其实也是一个栏目的 ...

  7. html5 图片转为base64格式异步上传

    因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...

  8. unity 2d 和 NGUI layer

    http://blog.csdn.net/xtxy/article/details/37876825 在使用unity2d开发游戏的时候,使用了NGUI作为界面,本来二者配合得还挺好,但是一个使用场景 ...

  9. iOS 图片 的 聊天气泡显示 Objective-C

    - (void)viewDidLoad { [super viewDidLoad]; UIImageView *ImageView01 = [[UIImageView alloc] init]; [I ...

  10. 在c或c+程序里打印调用栈。转

    在C/C++程序里打印调用栈信息 我们知道,GDB的backtrace命令可以查看堆栈信息.但很多时候,GDB根本用不上.比如说,在线上环境中可能没有GDB,即使有,也不太可能让我们直接在上面调试.如 ...