今天学习了表格和表单知识，我综合了他们添加了一些拓展知识做了一个用户注册表，以下面代码来整理表格和表单知识：

<!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>0606表格表单</title>
　　</head>

　　<body>
　　　　<from>
　　　　　　<table border="1" cellspacing="1" cellpadding="1" align="center" background="../../动态壁纸/壁纸2/preview.jpg">
　　　　　　　　<caption>
　　　　　　　　　　用户注册
　　　　　　　　</caption>
　　　　　　　　<tr>
　　　　　　　　　　<td width="100" align="right">
　　　　　　　　　　　　用户名：

　　　　　　　　　　</td>
　　　　　　　　　　<td width="150">
　　　　　　　　　　　　<input type="text" name="uname" value="请输入用户名" />
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td align="right">
　　　　　　　　　　　　照片：
　　　　　　　　　　</td>
　　　　　　　　　　<td>
　　　　　　　　　　　　<input type="file" name="file" />
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td width="100" align="right">
　　　　　　　　　　　　密码：
　　　　　　　　　　</td>
　　　　　　　　　　<td width="150">
　　　　　　　　　　　　<input type="password" name="pwd" value="" />
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td width="100" align="right">
　　　　　　　　　　　　确认密码：
　　　　　　　　　　</td>
　　　　　　　　　　<td width="150">
　　　　　　　　　　　　<input type="password" name="pwd" value="" />
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td width="100" align="right">
　　　　　　　　　　　　性别：
　　　　　　　　　　</td>
　　　　　　　　　　<td width="150">
　　　　　　　　　　　　<input type="radio" name="sex" id="s1" value="nan"/>
　　　　　　　　　　　　　　<label for="s1">男</label>
　　　　　　　　　　　　<input type="radio" name="sex" id="s2" value="nv"/>
　　　　　　　　　　　　　　<label for="s2">女</label>
　　　　　　　　　　　　<input type="radio" name="sex" id="s0" value="baomi"/>
　　　　　　　　　　　　　　<label for="s0">保密</label>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td width="100" align="right">
　　　　　　　　　　　　专业：
　　　　　　　　　　</td>
　　　　　　　　　　<td width="150">
　　　　　　　　　　　　<input type="checkbox" id="a1" name="ck[]"/>
　　　　　　　　　　　　　　<label for="a1">Java</label>
　　　　　　　　　　　　<input type="checkbox" id="a0"name="ck[]"/>
　　　　　　　　　　　　　　<label for="a0">.net</label>
　　　　　　　　　　　　<input type="checkbox" id="a3"name="ck[]"/>
　　　　　　　　　　　　　　<label for="a3">PHP</label>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td width="100" align="right">
　　　　　　　　　　　　出生年份：
　　　　　　　　　　</td>
　　　　　　　　　　<td width="150">
　　　　　　　　　　　　<select name="year">
　　　　　　　　　　　　　　<option value="2000">2000</option>
　　　　　　　　　　　　　　<option value="2001">2001</option>
　　　　　　　　　　　　　　<option value="2002">2002</option>
　　　　　　　　　　　　　　<option value="2003">2003</option>
　　　　　　　　　　　　</select>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td width="100" align="right">
　　　　　　　　　　　　自我介绍：
　　　　　　　　　　</td>
　　　　　　　　　　<td width="150">
　　　　　　　　　　　　<textarea rows="4" cols="12" ></textarea>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td colspan="2" align="center">
　　　　　　　　　　　　<input type="submit" name=" " value="提交" />&nbsp;&nbsp;

　　　　　　　　　　　　<input type="image" /*提交按钮*/ src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="40"  />

　　　　　　　　　　　　<input type="button" name="" value="是的" />&nbsp;&nbsp;
　　　　　　　　　　　　<input type="reset" name="" value="重置" />&nbsp;&nbsp;

　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　</table>
　　　　</from>
　　</body>
</html>

<form>

表单元素最外层。

<form> 标签用于为用户输入创建 HTML 表单。和用户交互，返回数据给服务器。

<form>中可以写在<body>的首尾，中间可以嵌套表格等

<form>属性：

　   action：提交给谁

　　method：提交方式，主要有get和post两种

　　　　get：提交的内容会以name=value的键值对的方式，name是键，value是值，在网址后？后显示在地址栏，用&隔开。这种方式不安全，而且有长度限制

　　　　post：隐式提交，安全，而且长度没有限制

　　target：规定在哪里打开页面，主要有：

　　　　_blank在新的选项卡打开

　　　　 _self在自身选项卡打开

　　enctype：规定在发送表单数据之前如何对其进行编码。如果要提交文件，使用该属性

表单内的元素有十二个，分为三类：

基本为<input type=* name=** value=**>

1、文本输入类

　　文本框：

　　<input type="text" name="uname" value="请输入用户名" />

　　可用于输入用户名，其中value是默认显示的值，用户输入后值为用户输入的内容

　　密码框：

　　<input type="password" name="pwd" value="" />

　　用于输入密码，页面显示为……，作为密码框，在用户注册界面不必有值，但是在用户保存密码后的登录界面，会显示用户保存的密码，当然，用户看到的是……

　　隐藏域：

　　<input type="hidden"  name=“”value=“”/>

　　这个在网页中不会显示，可用于存放一些重要不需要用户看到的信息，比如某些员工号

　　文本域：

　　<textarea rows="4" cols="12"></textarea>

　　文本域比较特殊，使用的标签是<textarea ></textarea>，不再是input，可以通过rows调整行高，用cols调整一行能输入几个字符

　　<textarea>标签没有name和value属性

2、按钮类

　　按钮类显示的名字用value控制

　　普通按钮

　　<input type="button" name="" value="是的" />&nbsp;&nbsp;

　　提交按钮

　　<input type="submit" name=" " value="提交" />&nbsp;&nbsp;

　　点击提交值给action

　　重置按钮

　　<input type="reset" name="" value="重置" />&nbsp;&nbsp;

　　点击清空清空用户输入的内容并变为默认值

　　图片按钮

　　<input type="image" /*提交按钮*/ src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="40"  />

　　点击的效果等同于提交按钮，可以通过width，height等属性来调整图片大小

3、选择输入类

　　下拉列表

　　<select name="year">
　　　<option value="2000">2000</option>
　　　<option value="2001">2001</option>
　　　<option value="2002">2002</option>
　　　<option value="2003">2003</option>
　　</select>

　　下拉列表由<select>和<option>来构成。下拉列表的name属性加在<select>中，value在<option>中。因为选择不同的项目提交的值也不一样。

　　单选

　　<input type="radio" name="sex" id="s1" value="nan"/>
　　　　<label for="s1">男</label>
　　<input type="radio" name="sex" id="s2" value="nv"/>
　　　　<label for="s2">女</label>
　　<input type="radio" name="sex" id="s0" value="baomi"/>
　　　　<label for="s0">保密</label>

　　单项选择type=“radio”，name需要相同。

　　选择只有点击到原点或者方块才会选中，相对不便，可以使用<label>来使点击文字就可以选中

　　<label> 标签的 for 属性应当与<input>中的 id 属性相同。id唯一。

　　单项选择的多项选择都有可以和<label>标签来结合。

　　复选框

　　<input type="checkbox" id="a1" name="ck[]"/>

　　　　<label for="a1">Java</label>
　　<input type="checkbox" id="a0"name="ck[]"/>
　　　　<label for="a0">.net</label>
　　<input type="checkbox" id="a3"name="ck[]"/>
　　　　<label for="a3">PHP</label>

　　同一组的复选框name一般用c[]数组的方式来提交。

　　选择文件

　　<input type="file" name="file" />

　　选择文件提交的是文件，所以value不是必须的。

需要注意的是：
name和value刚开始容易弄混，在提交的时候，name=value，在按钮类中value是显示，name不是必须的

但是在输入类和选择类中，都应有name和value，用于提交数据，在特殊情况，比如新用户注册，value可以没有默认值

另外，如果提交的不是字符，比如<input type="file" name="file" />中value不是必须的。

但是，对于初学者最好都写上name和value，可以值为空。

HTML表格表单综合——用户注册表的更多相关文章

  1. [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)

    自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...

  3. JavaWeb -- Struts1 使用示例： 表单校验 防表单重复提交 表单数据封装到实体

    1. struts 工作流程图 超链接 2. 入门案例 struts入门案例: 1.写一个注册页面,把请求交给 struts处理 <form action="${pageContext ...

  4. 解决iphone填写表单时，表单项获取焦点时往下拉屏，导致顶部标题栏下滑错位

    $(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...

  5. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  6. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  7. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  8. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  9. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

随机推荐

  1. 【PAT_Basic日记】1001. 害死人不偿命的(3n+1)猜想

    还是觉得代码放这靠谱,会定期的看看和优化代码 #include <stdio.h> #include <stdlib.h> int main() { int n; int co ...

  2. JS前端数据格式化

    当我们从后台取了数据,但是我们希望在前台统一显示格式时,我们可能需要格式化数据. 今天正好总结一下前端JS格式化数据的几个方法: 1. toFixed() 方法   可把 Number 四舍五入为指定 ...

  3. 启动LUXContentTests过程中遇到的问题

    首先,要想在localbox中使用Selenium,就得准备好浏览器的driver文件.比如chrome对应的chromedriver文件,该文件是一个exe可执行文件. 问题:当我尝试去跑LUXCo ...

  4. 如何运行一个vue工程

    在师兄的推荐下入坑vue.js ,发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家.   首先, ...

  5. [笔记]ACM笔记 - 排序小技巧

    Description 一个数组,要求先对前n个数字排序(以方便后续操作):又要求对前n+i个数字排序:又要求对前n+j - 前n+k个数字排序(i.j.k的大小远小于n,且i.j.k间没有大小关系) ...

  6. jquery源码 DOM加载

    jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...

  7. 使用expect的自动化交互

    Q:利用shell脚本实现ssh自动登录远程服务器? A:expect命令 #!/usr/bin/expect spawn ssh root@172.16.11.99 expect "*pa ...

  8. rsyslog管理分布式日志

    [TOC] 背景 有一个4台机器的分布式服务,不多不少,上每台机器上查看日志比较麻烦,用Flume,Logstash.ElasticSearch.Kibana等分布式日志管理系统又显得大材小用,所以想 ...

  9. Python标准库--Scope

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 你一定在很多计算机科学课程上听说过作用域.它很重要, ...

  10. PHP 底层的运行机制与原理 --转

    发现一片总结的还不错的文章,记录一下 PHP说简单,但是要精通也不是一件简单的事.我们除了会使用之外,还得知道它底层的工作原理. PHP是一种适用于web开发的动态语言.具体点说,就是一个用C语言实现 ...