表格与表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复活版邮箱注册</title>
</head>

<body>
<table background="file:///D|/0816MAYA韩如月/未标题-1.jpg" border="0" width="500" height="580" align="center">
<form>
<tr height="40"><td>邮箱:</td><td><input type="text" /></td></tr>
<tr height="20"><td></td><td>需要通过邮箱激活账户,不支持suhu,21cn,sougou的邮箱</td></tr>
<tr height="40"><td>登录用户名:</td><td><input type="text" /></td></tr>
<tr height="20"><td></td><td>仅在登陆时使用,字符数不少于2个</td></tr>
<tr height="40"><td>显示名称:</td><td><input type="text" /></td></tr>
<tr height="20"><td></td><td>即昵称,字符数不少于2个</td></tr>
<tr height="10"><td>密码:</td><td><input type="text" /></td></tr>
<tr height="10"><td>确认密码:</td><td><input type="text" /></td></tr>
<tr height="20"><td></td><td>至少8位,必须包含字母、数字、特殊符号</td></tr>
<tr height="30"><td>性别:</td><td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex" checked="checked" />女</td></tr>
<tr height="50"><td>喜好:</td><td><select size="1"><option>音乐</option><option>写作</option><option>跳舞</option></select></td></tr>
<tr height="30"><td></td><td><input type="button" value="注册"/></td></tr></form></table>
</body>
</html>

总结

看清几行几列<table><form><tr><td><td></tr></form></table>

1.3.1表格

<table width="" border="" cellpadding="" cellspacing="" align="" bgcolor="" background=""></table>

width:宽度。可以用像素或百分比表示。常用960像素。

border:边框,常用值为0.

cellpadding:内容跟单元格边框的边距。常用值为0.

cellspacing:单元格间的间距。常用值为0.

align:对齐方式

bgcolor:背景色

background:背景图片

<tr align=“一行内容水平对齐方式” valign=“一行内容的垂直对齐方式” height=“” bgcolor=“” background=“”></tr>行

<td align=“单元格内容对齐方式” valign=“单元格内容垂直方式” width=“” height=“” bgcolor“” background=“”></td>单元格<th></th>表头,单元格内容自动居中、加粗

内容放在单元格里,单元格放在行里,行放在表格里。设置单元格的行高、列高时,会同时影响对应的行和列

单元格合并

colspan=“n”合并同一行单元格(后面写代码要减去相对应的列) n代表往后多少列

rowspan=“n” 合并同一列单元格(从第二行开始减去对应的列)

1.3.2表单

<form></form>

1.文本输入 input输入 type类型

文本框<input type="text" value=""/>value默认值  placeholder显示的提示   两者效果差不多,placeholder为灰色,value为黑色。

密码框<input type="password" name="" id="" value=""/>

文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)></textarea>

隐藏域<input type=“hidden” name=“”  id=“” value=“”/>

2.按钮

提交按钮<input type="submit" name="" id="" disabled="disabled" value=""/>点击后转到form内提交服务器的地址

重置按钮<input type="reset" name="" id="" disabled="disabled" value=""/>disabled是按钮失效,enable使可用

普通按钮<.................."button"................................................................/>

图片按钮<.................."image"...................................................src="图片地址"/>

3.选择输入

单选按钮组<input type="radio" name="" checked="checked" value=""/>name用来分组,value值看不见,checked设置默认选项。

复选框组<input tupe="checkbox" name="" checked="checked" value=""/>

文件上传<...............="file"............................./>

下拉列表框<select  size="" name="" id="" multiple="multiple">

size=1时,为菜单;>1时,为列表。multiple为多选。

<option value="值">内容1</option>

<option value="值"selected=“selected”>内容2</option>  selected设为默认

<option value="值">内容3

</select>

时间: 2024-10-03 17:54:16

表格与表单的相关文章

HTML之表格和表单

1. 表格和表单的区别:表格多用于页面布局,创建页面的排版样式.表单多用于传输数据获取信息,如:input输入框,单选.多选.下拉选择框. 2. 表格:table. a. 基本样式如下: <table> <caption> table test </caption> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <table/&g

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

css011 表格和表单的格式化

css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom"> table 1:cosmofarmer.com's indoor mower roundup </caption> <colgroup> <col id="brand"></col> <col id="price&

DOM之表格与表单基础分享

我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节点:tBodies tHead  tFoot  rows(行)  cells(列)(带S的都是获取的是一组元素) var oTab = document.getElementById('tab'); oTab.tBodies[0].rows[1].cells[0] //获取第二行的第一个 注意,写表

【2016.11.27】表格和表单练习

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> table{border-collapse:collapse;} span{color:#f00;} </style> <title>表格和表单</title> </head> <body>

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

HTML1118,表格与表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

表格和表单的学习知识

刚开始接触java 学习基础知识表格和表单的做法,下面写今天所学知识 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l

HTML基础(表格与表单)

1.3.表格与表单 1.3.1.表格 <table></table> 表格 width:宽度.可以用像素或百分比表示.常用960像素. border:边框.常用值0. cellpadding:内容跟单元格边框的边距.常用值0. cellspacing:单元格之间的间距.常用值0. align:对齐方式. bgcolor:背景色. background:背景图片. <tr></tr> 行 align:一行的内容的水平对齐方式 valign:一行的内容的垂直对齐

HTML(二)表格、表单

本章主要内容: 表格 form表单 一.表格 A.结构 <table border="1" > <caption>我是标题</caption> <tr><th>序号</th><th>内容</th></tr> <tr><td>1</td><td>我</td></tr> <tr><td>2