Html----表单元素
表单元素:用于客户端和服务端进行信息交互的通道
<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----表单元素的更多相关文章
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 表单元素的submit()方法和onsubmit事件
1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱
网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...
- iScroll4下表单元素聚焦及键盘的异常问题
本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...
- 9月8日HTML表单元素(form、文本、按钮、选择)
表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...
随机推荐
- spring boot 整合pagehelper分页插件
Spring Boot 整合pagehelper分页插件 测试环境: spring boot 版本 2.0.0.M7 mybatis starter 版本 1.3.1 jdk 1.8 ------ ...
- ubuntu播放音频没声音
1. 安装pavucontrol sudo apt install pavucontrol 2.配置pavucontrol 在终端执行pavucontrol,弹出设置框进行如下设置:
- pycharm的各种设置,配置
http://blog.csdn.net/pipisorry/article/details/39909057# 目录(?)[+] pycharm学习技巧 Learning tips PyChar ...
- ubuntu 手动修改分辨率为1920 X 1080 的两种方式
方案一(临时性,重启会失效): 1.打开终端.输入:cvt 1920 1080 出现有modeline 的提示. 2.使用 xrandr 创建新的 mode,--newmode 后面跟刚刚 cvt 产 ...
- android 开发 使用自定义布局实现标题栏复用(标题栏内容自定义:使用代码实现和xml布局自定义属性2种办法实现)
在个人学习的情况下可能很少使用自定义布局去实现大量复用的情况下,但是在一个开发工作的环境下就会使用到大量复用的自定义控件. 实现思维: 1.写一个xml的布局,用于标题栏的样式,并且添加在标题栏中你想 ...
- <转载>apache 配置 http://www.blogjava.net/bukebushuo/articles/229103.html
基于 NCSA 服务器的配置文件 由 Rob McCool 编写,龙子翻译 Apache服务器主配置文件. 包括服务器指令的目录设置. 详见 <URL:http://www.apache.org ...
- 33. 完全卸载oracle11g步骤
完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...
- 关于URI和URL的区别
URI:统一资源标志符(Uniform Resource Identifier)URL:统一资源定位符(uniform resource location) URN = Universal Resou ...
- springboot retry
try/catch,while 循环或者定时任务 这样看起来 好 low sping boot retry , 这样代码更简洁 eg: @Retryable(value= {RemoteAcce ...
- 静态方法@staticmethod
staticmethod 返回函数的静态方法.该方法不强制要求传递参数,名义上在类里面归类管理,但是不能使用类的变量和实例的变量是类的工具包 如下声明一个静态方法: class Room: t = 1 ...