网页镶嵌：

<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" />男&nbsp;
<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>&nbsp;<select size="1"><option>2月</option><option>3月</option><option>4月</option></select>&nbsp;<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>&nbsp;<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表单入门基础的更多相关文章

  1. django最简单表单入门

    两个html页面,存放于某个应用下的templates文件夹下. index.html 提交 点击“提交”按钮后,会调入第二个页面hello.html显示文本框的内容 原理是通过form的action ...

  2. Angular 表单验证 基础篇

    <div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...

  3. 0522 HTML表单 CSS基础

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  4. Zend_Form 创建、校验和解析表单的基础--（手冊）

    1.  创建表单对象 创建表单对象很easy:仅仅要实现 Zend_Form: <?php $form = newZend_Form; ? > 对于高级用例.须要创建 Zend_Form ...

  5. Html5 表单元素基础

    表单元素 1.定义: 表单是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具.(邮箱注册,用户登录,调查问卷等) 2.表单元素(下拉框,输入框……) 3.表单主结构: <fo ...

  6. 学习EXTJS6（8）基本功能-表单的基础表字段Ext.form.field.Basic

    Ext.form.field.Basic是表单字段的基类. Ext.form.field.Text Ext.form.field.TextArea Ext.form.field.Number Ext. ...

  7. ⑥bootstrap表单使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. sencha表单入门例子

    来自于<sencha touch 权威指南> ------------------------------- 一.网站结构 二.index.html代码 <!DOCTYPE HTML ...

  9. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

随机推荐

  1. discuz MVC结构分析

    Discuz软件经解压后产生的三个文件夹中的一个叫upload的成为网站的根目录.里面的内容可以在某些网站上在线阅读,如用好库编程网.也可以离线在本地阅读,如用VS.Php for Visual St ...

  2. js中replace的回调函数使用。

    这只是一个小问题,但是之前并没有发现.这个问题就是replace的第二个函数是支持回调函数的. var ext = new RegExp('f','g'); 1.str.replace(ext ,1) ...

  3. tomcat的CATALINA_HOME可以不用设置

    不配置tomcat的环境变量也是可以运行的 用记事本打开tomcat/bin目录下面的startup.bat 在文本的前一部分有下面的脚本代码 rem Guess CATALINA_HOME if n ...

  4. c# 搭建高效分布式web （进一步实现软件的热插拔）

    一 加入 和其他网站相同的特性 nginx 做代理 并且和IIS 进行搭配搭建 web 前台 二 缓存使用 memcached 和session 共享做服务器的缓存处理减轻sql数据库的压力 包含关系 ...

  5. HDU 4405 Aeroplane chess (概率DP)

    题意:你从0开始,要跳到 n 这个位置,如果当前位置是一个飞行点,那么可以跳过去,要不然就只能掷骰子,问你要掷的次数数学期望,到达或者超过n. 析:概率DP,dp[i] 表示从 i  这个位置到达 n ...

  6. MATLAB的crack安装小曲

    MATLAB的crack安装小曲 本学期要学数学模型和数值分析,需要用MATLAB,便琢磨着装MATLAB.我同专业的同学会装MATLAB的crack,他是数学协会的理事长,平时爱吹牛,问他一个简单的 ...

  7. 天气预报API(五)：城市代码--“新编码”和“旧编码” 对比

    参考一些博客.文章 来查找 测试 接口,后来发现两套城市编码标准,有点想法,故拿来对比分析. 注:新旧编码是个人主观叫法,只是为了方便称呼,可能有不当之处,请留言更正. 暂且称 中国天气网等网站使用的 ...

  8. Windows Phone 8.1 新特性 - 控件之列表选择控件

    本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件. 在Windows Phone 8 时代,大家都会使用 LongListSelector 来实现列表选择控件,对数据进行分组显 ...

  9. ios申请真机调试( xcode 5)详细解析

    已经有开发证书的直接跳过第一步 第一步:申请"开发证书" 进入苹果开发者99美元账号: 选择:Certificates, Identifiers & Profiles 关于 ...

  10. 如何安装win10+Red Hat Enterprise Linux双系统?

    1,如何安装win10+Red Hat Enterprise Linux双系统???? 有很多人(没做过调查,可能就我自己想装吧)想要安装Red Hat Enterprise Linux系统,但是又不 ...