HTML——使用表格对表单进行布局

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vuc2h1bWlu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

<!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>
	<form action="#" method="post">
    	<table width="450" border="0" bgcolor="#000000" cellspacing="1" cellpadding="2"><!--cellspacing指相邻单元格之间的间距。cellpadding指控制单元格内部文字与边框的边距-->
        <tbody>
        	<tr height="30">
            	<td colspan="2" align="center" bgcolor="#CCCCCC"><font size="5">用户注冊</font></td>
            </tr>
            <tr height="30">
            	<td width="150" align="right" bgcolor="#E6E6E6">username</td>
                <td width="300" bgcolor="#E6E6E6">
                	<input type="text" name="UserName" maxlength="20" size="15" /></td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">密码</td>
                <td bgcolor="#E6E6E6">
                	<input name="UserPass" type="password" size="15" maxlength="20" /></td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">反复密码</td>
                <td bgcolor="#E6E6E6">
                	<input name="UserPass" type="password" size="15" maxlength="20" /></td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">性别</td>
                <td bgcolor="#E6E6E6">
                	<input name="sex" type="radio" value="男" checked="checked" />男
                    <input name="sex" type="radio" value="女" />女
                </td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">爱好</td>
                <td bgcolor="#E6E6E6">
                	<input name="like" type="checkbox" value="1" />足球
                    <input name="like" type="checkbox" value="2" />篮球
                    <input name="like" type="checkbox" value="3" />乒乓球
                </td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">省份</td>
                <td bgcolor="#E6E6E6">
                	<select name="province">
                    	<option>陕西省</option>
                        <option>山东省</option>
                        <option>山西省</option>
                        <option>河北省</option>
                        <option>河南省</option>
                        <option>湖南省</option>
                        <option>湖北省</option>
                        <option>黑龙江省</option>
                        <option>其它</option>
                   </select>
                </td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">自我介绍</td>
                <td bgcolor="#E6E6E6">
                	<textarea name="Intro" cols="40" rows="5" id="Intro"></textarea></td>
            </tr>
            <tr height="30">
            	<td align="center" colspan="2" bgcolor="#CCCCCC">
                	<input type="submit" name="send" value="提交" />
                    <input type="reset" name="reset" value="重置" />
                </td>
            </tr>
        </tbody>
        </table>
	</form>
</body>
</html>
时间： 2024-08-09 16:58:44

HTML——使用表格对表单进行布局的相关文章

第7章 对表单和数据表格应用样式

一 表格特有元素 1 summary和caption summary:应用于表格标签,描述表格内容 caption:基本上用作表格标题. 2 thead,tbody和tfoot 行标题和列标题应该使用th而不是td,表格标题可以设置值为row或col的scope属性,定义它是行标题还是列标题. 3 col和colgroup 二 数据表格标记 三 基本的表单布局 1 fieldset:对相关信息块分组.大多用户代理在其周围加一条细边框线,可用border:none;关闭. fieldset中的le

锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用

1,button和checkbox的例子: form表单 <form action=""> 你爱的远动有?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="蓝球" />

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能: # 文档类型 <!DOCTYPE html> <html lang="zh-cn">     <!-- Html Code --> </html> 说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性. # 移动先行 <meta name="viewport" content="width=device-width, initi

Bootstrap框架(基础篇)之列表,表格,表单

继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootst

如何使用AngularJS对表单提交内容进行验证

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine

jquery对表单元素的取值和赋值

/*获得text的值*/ var textval =$("#text_id").attr("value"); //或者 var textval =$("#text_id").val(); /*获取单选按钮的值*/ var valraio =$("input[type=raio]:checked").val(); /*获取一组名为items的radio被选中项的值*/ var item =$('input[name=items]

Android：控件布局（单帧布局）FrameLayout

FrameLayout:所有控件位于左上角,并且直接覆盖前面的子元素. 实例: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_heig

html5 移动端单页面布局

序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ,再通俗的说就是类似于平常的选项卡 但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面 单页面的作用以及优势:    1.嵌套到native里实现app的混合开发    2.数据量小的页面用单页面便于开发    3.无需跳转页面响应更快 Demo效果

php对表单内容进行处理

/** * 过滤HTML内容后返回 * * @param $string * @param bool $html * * @return array|string */ public static function safeOutput($string, $html = false) { if (!$html) $string = strip_tags($string); return @Tools::htmlentitiesUTF8($string, ENT_QUOTES); } public