HTML之表格，表单的使用

属性

border 设置表格边框
width，height设置表格宽度，高度
align,valign设置单元格水平或者垂直对齐
bgcolor设置表格颜色
colspan:定义在td中可以合并列
rowspan:定义在td中可以合并行

form常用属性

form标签定义表单

属性

action =“服务器地址”把表单的数据提交到该地址
method：提交方式，get不安全，速度快，不能大于2kb,post安全，大小不限，速度慢

表单元素

type=“元素”
text:单行文本框
password：密码框
radio:单选按钮，要想只能选择一个，name值要设置成相同的
checkbox：复选框
submit：提交按钮
reset：重置按钮
button：普通按钮
image：图片提交按钮
Email：邮箱
number：数值输入
date：日期框
基本应用效果图：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="" method="post"><table   cellspacing="" cellpadding="" align="center"><tr><td  colspan="2">&nbsp;</td><td ><font size="6" face="黑体">用户注册</font></td></tr><tr><td  colspan="2" align="right">用户名</td><td><input type="text" name="" id="" value="" /></td></tr><tr><td colspan="2" align="right">密码</td><td><input type="password" name="" id="" value="" /></td></tr><tr><td colspan="2" align="right">确认密码</td><td><input type="password" name="" id="" value="" /></td></tr><tr><td colspan="2" align="right">性别</td><td><input type="radio" name="a" id="a" value="" />男<input type="radio" name="a" id="a" value="" />女</td></tr><tr><td colspan="2" align="right">爱好</td><td><input type="checkbox" name="" id="" value="" />学习<input type="checkbox" name="" id="" value="" />编程<input type="checkbox" name="" id="" value="" />健身</td></tr><tr><td colspan="2" align="right">出生日期</td><td><input type="date" name="" id="" value="" /></td></tr><tr><td colspan="2" align="right">工资</td><td><input type="number" name="" id="" value="" /></td></tr><tr><td colspan="2" align="right">学历</td><td><select name=""><option value="">小学</option><option value="">大学</option></select></td></tr><tr><td colspan="2" align="right">基本信息</td><td><textarea name="" rows="3" cols="16"></textarea></td></tr><tr><td colspan="2" align="right" ><input type="submit" name="" id="" value="提交" /></td><td><input type="reset" name="" id="" value="重置" /></td></tr></table></form></body>
</html>

基本应用效果图：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table  cellspacing="" cellpadding=""><tr><td colspan="2">公司名称<br />&nbsp;</td><td colspan="3" align="right">加入收藏</td></tr><tr><td colspan="2"><img src="img/new_logo.png"/></td><td colspan="3" align="right"><img align="right" src="img/nav_r_ico.png"/></td></tr><tr><td colspan="5" align="center"><hr />首页  关于<hr /></td></tr><tr><td colspan="5" align="right">java列表</td></tr><tr><td colspan="5"><h3>课程培训</h3><h2>共种课程视频</h2></td></tr><tr><td colspan="5"><img width="100%" src="img/001.png"/></td></tr><tr><td align="center"><img src="img/002.png"/> <br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/003.png"/><br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/004.png"/><br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/005.png"/><br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/006.png"/><br />书名：sss   <br />价格：sss</td></tr><tr><td align="center"><img src="img/007.png"/><br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/008.png"/><br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/009.png"/><br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/010.png"/><br />书名：sss   <br />价格：sss</td><td align="center"><img src="img/011.png"/><br />书名：sss   <br />价格：sss</td></tr><tr><td colspan="5" ><img width="100%" src="img/012.png"/></td></tr></table></body>
</html>

HTML之表格，表单的使用相关推荐

2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
vue.js 表格表单序号
vue.js 表格表单序号表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...
【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。
目录一.表格表单的随机选择效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局第一步: 第二步: 2.CSS布局 3.JS的布局第一步: 第二步: 第三步: 二.简单的随机点名效果展 ...
表格表单HTML代码学生登记,html实现用户注册页面（表单+表格）——html小练习...
1 2 3 4 5 表格+表单练习 6 7 8 9 10 11 注册新用户 12 13 14 15 16 17 18 19 20 21 22 23 用户名 24 25 26 27 登陆邮箱 28 29 ...
js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
js table 生成序号_el-table树形表格表单验证(列表生成序号)
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...

HTML之表格，表单的使用

标签：

属性

form常用属性

属性

表单元素

HTML之表格，表单的使用相关推荐

最新文章

热门文章