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

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

文本输入框:

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

密码输入框:

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

单选框

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

复选框

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

下拉列表

<select>---选择
<option></option>---项
</select>
select的属性:name/value
multiple="multiple",变成列表框(multiple:多列)
size="2",表示显示2行 option的属性:
selected="selected",表示哪一项被选中
disabled="disabled",表示禁止被选中
value="值"

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

<input type="button"/>
name/value
<button type="button">按钮</button> <button>按钮</button>
属性:type/name/value
type="button(按钮)/reset(重置)/submit(提交)",默认为button

重置按钮:

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

提交按钮:

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

文件按钮:

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

图片按钮:

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

隐藏域:

<input type="hidden"/>

文本域:

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

label标签

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

表单元素

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

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

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

空语义标签

块级容器标签:<div></div>
空语义标签:没有html属性的标签 行内容器标签:<span></span>
空语义标签

自动换行的标签:

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

不会自动换行的标签:

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. 初级安全入门——Windows操作系统的安全加固

    实验网络拓扑如下: 工具简介 Kali操作系统 Kali Linux是安全业内最知名的安全渗透测试专用操作系统.它的前身就是业界知名的BackTrack操作系统.BackTrack在2013年停止更新 ...

  2. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  3. 前端(慕课网)笔记二:http协议

    缓存 cors 1.http协议的主要特点: 简单快速:每个资源URI是固定的: 灵活:通过一个协议完成不同数据格式的传输 无连接:连接一次就会断开,不会保持连接 无状态:客服端和服务端是两种身份,客 ...

  4. 了解一下,Java 虚拟机

    1.1 - 概述     Java 总述:Java 不仅是一门编程语言,还是一个由一系列计算机软件和规范形成的技术体系,这个技术体系提供了完整的用于软件开发和跨平台部署的支持环境,并广泛应用于 嵌入式 ...

  5. Java并发编程:Java Thread 的 run() 与 start() 的区别

    1. sleep 和 wait 方法解释 sleep()方法是Thread类里面的,主要的意义就是让当前线程停止执行,让出cpu给其他的线程,但是不会释放对象锁资源以及监控的状态,当指定的时间到了之后 ...

  6. [Lua]string与中文

    参考链接: https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81/8446880?fr=aladdin#7 http:// ...

  7. 重识linux-常见压缩和解压缩命令

    重识linux-常见压缩和解压缩命令 1 compress 目前已经很少使用,知道有个  不重点学习 2 gzip和zcat 目前应用最广泛 gzip [-cdtv#] 文件名 zcat 文件名.gz ...

  8. nine

    [拉肚子] 1.原因:消化不良.不良刺激.进食不当的食物/病毒 2.调理: 消化不良引起的:妈咪爱:山药粥:少食多餐 不良刺激引起的:不要受惊受凉过热

  9. mybatis三(关联查询)

    一.类属性 @Alias("depart")public class Department { private Integer id; private String departN ...

  10. python第三方库自动安装脚本

    #python第三方库自动安装脚本,需要在cmd中运行此脚本#BatchInstall.pyimport oslibs = {"numpy","matplotlib&qu ...