HTML表格表单综合——用户注册表
今天学习了表格和表单知识，我综合了他们添加了一些拓展知识做了一个用户注册表，以下面代码来整理表格和表单知识：
<!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="提交" />
<input type="image" /*提交按钮*/ src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="40" />
<input type="button" name="" value="是的" />
<input type="reset" name="" value="重置" />
</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="是的" />
提交按钮
<input type="submit" name=" " value="提交" />
点击提交值给action
重置按钮
<input type="reset" name="" value="重置" />
点击清空清空用户输入的内容并变为默认值
图片按钮
<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表格表单综合——用户注册表的更多相关文章
- [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)
自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...
- JavaWeb -- Struts1 使用示例： 表单校验 防表单重复提交 表单数据封装到实体
1. struts 工作流程图 超链接 2. 入门案例 struts入门案例: 1.写一个注册页面,把请求交给 struts处理 <form action="${pageContext ...
- 解决iphone填写表单时，表单项获取焦点时往下拉屏，导致顶部标题栏下滑错位
$(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...
- BootStrap 智能表单系列 九 表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- HTML 5 服务器发送事件、Input 类型、表单元素、表单属性
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...
随机推荐
- 记因PHP的内存溢出导致的事故之解决
如果对您有用记得关注,更多干货. 今天上午刚到公司,就有同事在公司群里反映某个计划任务出现问题了.我就怀着刨根问底的心,去查看了log.发现挺有意思的一个问题,PHP内存溢出导致脚本执行失败.那就一起 ...
- URL解析器urllib2
urllib2是Python的一个库(不用下载,安装,只需要使用时导入import urllib2)它提供了一系列用于操作URL的功能. urlopen urllib2.urlopen可以接受Requ ...
- stm32的定时器学习
看了几篇博客之后,对这个定时器也有了一些认识,其实和51差不多,就是配置定时器的时候多了几个步骤而已. 其中很好的一片是:http://blog.sina.com.cn/s/blog_49cb4249 ...
- IDEA第三章----idea常用配置
前两章讲解了idea的git.maven.jdk.tomcat.编码等基本配置,可以让你的项目正常运行,这一章将讲解idea的一些常用设置,这些也正是idea可爱之处,大大提高了开发的效率. 第一节: ...
- checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- js中的事件委托详解
概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位 ...
- TCP/IP协议精华笔记
1.简介 TCP/IP协议并非单指TCP协议.IP协议,它是一组包括TCP协议和IP协议,UDP(User Datagram Protocol)协议.ICMP(Internet Control Mes ...
- 基于Struts2的SpringMVC入门
1.SpringMVC概述 (1)SpringMVC为表现层提供基础的基于MVC设计理念的优秀Web框架, (2)SpringMVC通过一套mvc的注解,让POJO成为处理请求的控制器,而无需任何接口 ...
- Java核心技术 卷I chapter05 继承
2017年4月10日19:41:44 仅仅用于打好基础 1. 在Java中,所有的继承都是公有继承,而没有C++中的私有继承和保护继承! 2.关键字super的使用方法: (1) 子类中想调用父类中的 ...
- Web 版 PowerDesigner (Canvas) 技术
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形. ...