HTML表单入门基础
网页镶嵌:
<iframe src="http://www.cnblogs.com/tfl-511/" width="200" height="300" frameborder="0”
表单的输入是被<form></form>包裹:
例如
<form>
<table width="800" align="center" cellpadding="0" cellspacing="0" border="0">
<tr align="left" height="50">
<td>注册账号</td>
</tr>
<tr height="2" bgcolor="#000000">
<td width="100%" colspan="3"></td>
</tr>
<tr height="50">
<td align="right" width="20%">昵称</td>
<td width="60%"><input type="text" placeholder="请输入昵称" required="required" style="width:90%;"/></td>
<td><i>昵称不能为空</i></td>
</tr>
</table>
</form>
一、文本输入
文本框:<input type="text" placeholder="输入文字" value=“默认值” style=“width:100%,"/>
密码框:<input type="password" placeholder="显示提示在文本框内" value=“默认值” style=“width:100%, height:50,"/>
文本框:<textarea cols="每行字符的多少” rows="几行高"></textarea>
隐藏域:<input type="hidden"/>
二、按钮
递交按钮:<input type="submit" value="按钮里面显示的文字" disabled="disabled"(是按钮不可使用)required=“required”(内容必须填写)/> 将所有文件上传,并且刷新网页
重置按钮:<input type="reset" disabled="disabled"(是按钮不可使用)required=“required”(内容必须填写)/> 将form表单重新恢复默认
普通按钮:<input type="buttton" value="登录" disabled="disabled"(是按钮不可使用)/> 没有刷新功能
图片按钮:<input type="image" src="图片地址"/>
三、选择输入
单选择按钮:<input type="radio" name="进行分组,一般为男女" checked="checked"(默认被选中)
复选按钮:<input type="checkbox" checked="checked"(默认被选中,不能取消)
文件上传:<input type="file"/>
下拉列表:<select size="1"(一列单选)></select>
<select multiple="multiple" size="2"(一列多选)></select>
<option value="例条形码1">商品1</option>
<option value="例条形码2">商品2</option>
<option value="例条形码3">商品3</option>
例如
<!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>QQ注册页面</title>
</head>
<body topmargin="100" background="fd1.jpg">
<form>
<table width="800" align="center" cellpadding="0" cellspacing="0" border="0">
<tr align="left" height="50">
<td>注册账号</td>
</tr>
<tr height="2" bgcolor="#000000">
<td width="100%" colspan="3"></td>
</tr>
<tr height="50">
<td align="right" width="20%">昵称</td>
<td width="60%"><input type="text" placeholder="请输入昵称" required="required" style="width:90%;"/></td>
<td><i>昵称不能为空</i></td>
</tr>
<tr height="50">
<td width="20%" align="right">密码</td>
<td width="60%"><input type="password" required="required" style="width:90%;" placeholder="请输入密码" /></td>
<td><i>密码不能为空</i></td>
</tr>
<tr height="50">
<td align="right" width="20%">确认密码</td>
<td width="60%"><input type="password" required="required" placeholder="请确认密码" style="width:90%;" /></td>
<td><i>请再次输入密码</td>
</tr>
<tr height="50">
<td width="20%" align="right">性别</td>
<td width="60%"><input type="radio" name="sex" />男
<input type="radio" name="sex" />女</td>
</tr>
<tr height="50">
<td align="right" width="20%">生日</td>
<td width="60%"><select size="1"><option>1992</option><option>1993</option><option>1994</option></select> <select size="1"><option>2月</option><option>3月</option><option>4月</option></select> <select size="1"><option>2号</option><option>3号</option><option>4号</option></select></td>
</tr>
<tr height="50">
<td width="20%" align="right">所在地</td>
<td width="60%"><select size="1"><option>山东</option><option>吉林</option></select> <select size="1"><option>淄博</option><option>济南</option></select></td>
</tr>
<tr height="50">
<td width="20%" align="right">电话</td>
<td width="60%"><input type="text" placeholder="请输入电话号码" style="width:90%;" /></td>
</tr>
<tr height="50">
<td width="20%"></td>
<td width="60%"><font size="2" color="#666666">可通过该手机号码快速寻找密码<br />
中国大陆以外手机号码<a href="http://www.cnblogs.com/tfl-511/">点击这里</a></font></td>
</tr>
<tr height="50">
<td></td>
<td><input type="submit" value="注册" style="width:90%; height:50px;"/></td>
</tr>
<tr height="50">
<td></td>
<td><input type="checkbox" /><font size="2">同时开通QQ空间</font></td>
</tr>
<tr height="50">
<td></td>
<td><input type="checkbox" /><font size="2">我已阅读并同意相关服务条款和隐私政策</font></td>
</tr>
</table>
</form>
</body>
</html>
HTML表单入门基础的更多相关文章
- django最简单表单入门
两个html页面,存放于某个应用下的templates文件夹下. index.html 提交 点击“提交”按钮后,会调入第二个页面hello.html显示文本框的内容 原理是通过form的action ...
- Angular 表单验证 基础篇
<div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...
- 0522 HTML表单 CSS基础
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- Zend_Form 创建、校验和解析表单的基础--(手冊)
1. 创建表单对象 创建表单对象很easy:仅仅要实现 Zend_Form: <?php $form = newZend_Form; ? > 对于高级用例.须要创建 Zend_Form ...
- Html5 表单元素基础
表单元素 1.定义: 表单是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具.(邮箱注册,用户登录,调查问卷等) 2.表单元素(下拉框,输入框……) 3.表单主结构: <fo ...
- 学习EXTJS6(8)基本功能-表单的基础表字段Ext.form.field.Basic
Ext.form.field.Basic是表单字段的基类. Ext.form.field.Text Ext.form.field.TextArea Ext.form.field.Number Ext. ...
- ⑥bootstrap表单使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- sencha表单入门例子
来自于<sencha touch 权威指南> ------------------------------- 一.网站结构 二.index.html代码 <!DOCTYPE HTML ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
随机推荐
- Android多线程机制和Handler的使用
参考教程:iMooc关于Handler,http://www.imooc.com/learn/267 参考资料:Google提供Android文档Communicating with the UI T ...
- spring官网改版后,如何下载jar包
http://repo.springsource.org/libs-release-local/org/springframework 通过以上地址,可树型查看所有发布的包 问题是,官网页面上为何找不 ...
- git 命令大全
git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 git config --glob ...
- java 8种基本数据类型的默认值及所占字节数
通过一段代码来测试一下 8种基本数据类型的默认值 package dierge; public class Ceshi { int a; double b; boolean c; char d; fl ...
- easymock+junit+spring学习·
Easymock学习 Author:luojie 1. Easymock简介 EasyMock 是一套通过简单的方法对于指定的 ...
- session和cookie的简单理解
0. 引子,我们为什么要cookie和session 因为http请求是无状态的(不能记录用户的登录状态等),所以需要某种机制来保存用户的登录状态等信息,在下次访问web服务的时候,不用再 ...
- JavaScript-计算器
事件周期 DOM:3个阶段 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数.默认,暂不触发任何事件 2.目标触发:优先触发目标元素绑定的事件处理函数 目标元素:实际点击的元素 3.冒泡 ...
- GIS 网站参考
www.TimeGIS.com 开源GISOpen Source Geospatial Foundation http://osgeo.org/index.htmlMapServer — UMN Ma ...
- what is a ear
http://docs.oracle.com/javaee/6/tutorial/doc/bnaby.html An EAR file (see Figure 1-6) contains Java E ...
- uva 11357 Matches
// uva 11357 Matches // // 题目大意: // // 给你n个火柴,用这n个火柴能表示的非负数有多少个,不能含有前导零 // // 解题思路: // // f[i] 表示正好用 ...