表单元素:用于客户端和服务端进行信息交互的通道

  1. <form></form>:所有的表单元素都应该放在里面

文本输入框:

  1. <input type="text"/>
  2. 属性:
  3. name="小狗",每个表单元素都有name属性
  4. value="值",每个表单元素都有value属性,value值是随着用户输入而改变
  5. size="5",设置文本输入框的长度
  6. maxlength="10",最多可以输入的字符数
  7. placeholder="提示信息",提示
  8. readonly="readonly",只读

密码输入框:

  1. <input type="password"/>
  2. name/value等属性,属性完全跟文本输入框一致

单选框

  1. <input type="radio"/>
  2. name/value属性
  3. checked="checked",表示被选中

复选框

  1. <input type="checkbox"/>
  2. name/value属性
  3. checked="checked",表示被选中

下拉列表

  1. <select>---选择
  2. <option></option>---项
  3. </select>
  4. select的属性:name/value
  5. multiple="multiple",变成列表框(multiple:多列)
  6. size="2",表示显示2行
  7.  
  8. option的属性:
  9. selected="selected",表示哪一项被选中
  10. disabled="disabled",表示禁止被选中
  11. value="值"

------------------------
按钮
普通按钮:

  1. <input type="button"/>
  2. name/value
  3. <button type="button">按钮</button>
  4.  
  5. <button>按钮</button>
  6. 属性:type/name/value
  7. type="button(按钮)/reset(重置)/submit(提交)",默认为button

重置按钮:

  1. <input type="reset" value="重置"/>
  2. <button type="reset">重置</button>

提交按钮:

  1. <input type="submit" value="提交"/>
  2. <button type="submit">提交</button>
  3. 提交按钮有页面刷新的效果,同时可以将文本输入框和密码输入框的相关信息提交到地址栏上

文件按钮:

  1. <input type="file"/>---只能选择文件,不能选择文件夹
  2. name/value属性

图片按钮:

  1. <input type="image" src="图片的路径"/>
  2. 属性:name/value/width/height

隐藏域:

  1. <input type="hidden"/>

文本域:

  1. <textarea></textarea>
  2. 有name属性,没有value属性
  3. cols="50",设置文本域的宽度
  4. rows="5",设置文本域的高度

label标签

  1. <label></label>
    属性:
  2. for="id名"
  3. <label for="admin">账号:<input type="text" id="admin"/></label>
  4. <label for="pwd">密码:</label><input type="password" id="pwd"/>
  5. label标签可以为表单元素定义,使文本和表单元素之间的关系更紧凑

表单元素

  1. <form></form>
    属性:
  2. action="路径",跳转到某个页面,将表单元素里面数据提交到某个页面
  3. method="get/post"
  4. get:会将数据显示在地址栏上
  5. post:不会将数据显示在地址栏上

----------------------------
内联框架

  1. <iframe></iframe>
  2. 在当前页面中划分出一块区域用来显示另外一个页面
  3. 属性:
  4. src="相对路径"
  5. width="1000px/80%",设置显示区域的宽度
  6. height="1000px/80%",设置显示区域的高度
  7. frameborder="1/0",1---有边框,0---没有边框
  8. scrolling="yes/no/auto(自动)"
  9. yes:表示显示滚动条
  10. no:表示不显示滚动条
  11. auto:表示自动显示滚动条

空语义标签

  1. 块级容器标签:<div></div>
  2. 空语义标签:没有html属性的标签
  3.  
  4. 行内容器标签:<span></span>
  5. 空语义标签

自动换行的标签:

  1. 1.div 2.hn 3.p 4.table 5.form 6.ul 7.li 8.ol 9.dl...

不会自动换行的标签:

  1. 1.span 2.i 3.b 4.font 5.u 6.s 7.img 8.input 9.select 10.button 11.a...

Html----表单元素的更多相关文章

  1. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  3. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  4. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  6. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  7. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  8. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

  9. iScroll4下表单元素聚焦及键盘的异常问题

    本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...

  10. 9月8日HTML表单元素(form、文本、按钮、选择)

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...

随机推荐

  1. Wsgi的web框架实例

    建立server服务端: from wsgiref.simple_server import make_server import time def f1(request): return [b'&l ...

  2. QQ号码正则判断

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  3. Java之ConcurrentHashMap

    由于工作中使用到了ConcurrentHashMap,然后查了一波资料,最后整理如下: 1. 描述: ConcurrentHashMap是在Java1.5作为HashTable的替代选择新引入的,是c ...

  4. CentOS网络设置 couldn't resolve host 'mirrorlist.centos.org问题解决

    在VBox上安装完CentOS6.5之后,首次使用时yum命令安装软件时,经常遇到"couldn't resolve host 'mirrorlist.centos.org"这个问 ...

  5. js中的面向对象--类似于类的概念

    创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 使用object va ...

  6. 精通Web Analytics 2.0 (12) 第十章:针对潜在的网站分析陷阱的最佳解决方案

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第十章:针对潜在的网站分析陷阱的最佳解决方案 是时候去处理网站分析中最棘手的一些问题了,然后获得属于你的黑带,这是成为分析忍者的 ...

  7. 登录之md5加密

    语句: password = hex_md5(password); 引入js文件: md5.js: /* * A JavaScript implementation of the RSA Data S ...

  8. HashMap怎样解决碰撞问题

    碰撞:HashMap运用put方法存储多个元素时,计算得出相同的hashCode,在put时出现冲突. 处理:利用“拉链法”处理HashCode的碰撞问题:当我们将键值对传递给put方法时,他调用键对 ...

  9. 现学现卖——Keil uVision 使用教程

    Keil uVision 使用教程 1.如果有旧的工程在,先关闭旧工程.Project -> Close Project2.新建工程.Project -> New uVision Proj ...

  10. js记录用户访问页面和停留时间

    1.setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval(code,millisec[,"lang" ...