博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web前端2017.6.10
阅读量:4992 次
发布时间:2019-06-12

本文共 4244 字,大约阅读时间需要 14 分钟。

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

<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>
属性:
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>
空语义标签
----------------------------
自动换行的标签:
div hn p table form ul li ol dl...

不会自动换行的标签:

span i b font u s img input select button a...

 

 

 

 

 

 

 

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

<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>
属性:
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>
空语义标签
----------------------------
自动换行的标签:
div hn p table form ul li ol dl...

不会自动换行的标签:

span i b font u s img input select button a...

 

转载于:https://www.cnblogs.com/jiandandeboke/p/7016743.html

你可能感兴趣的文章
selenium+maven+testng+IDEA+git自动化测试环境搭建(二)
查看>>
Mini2440 UART原理及使用
查看>>
Linux学习第六篇之文件处理命令ln(链接命令)
查看>>
thinkphp5 tp5 七牛云 上传图片
查看>>
VM下Linux网卡丢失(pcnet32 device eth0 does not seem to be ...)解决方案
查看>>
第一阶段意见汇总以及改进
查看>>
再说virtual
查看>>
随笔:技术流可以这样写博客
查看>>
[优化]JavaScript 格式化带有占位符字符串
查看>>
打JAR包
查看>>
大图轮播
查看>>
UNIX环境高级编程读书笔记
查看>>
java awt 乱码问题
查看>>
矩阵中的路径
查看>>
unity回调函数范例
查看>>
linux下给php安装curl、gd(ubuntu)
查看>>
Java自带的Logger使用-代码摘要
查看>>
Java设计模式系列 — 构造器模式
查看>>
MySQL执行计划explain的key_len解析
查看>>
Windows Phone开发(9):关于页面状态 转:http://blog.csdn.net/tcjiaan/article/details/7292160...
查看>>