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="提交"  />&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,可以值为空。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏依乐祝

.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CM...

1913
来自专栏惶心 - 技术博客

为博客标题自定义字体

最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。(其实我的博客也弄了只不过他们不看而已)。

4164
来自专栏jiajia_deng

react-router 环境使用锚点的方法

1414
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

1252
来自专栏DeveWork

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobi...

3.1K10
来自专栏惶心 - 技术博客

Grouper.html: 分享群组的最佳方式

之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个...

1726
来自专栏jiajia_deng

react-router 环境使用锚点的方法

2302
来自专栏Seebug漏洞平台

Firefox - SVG cross domain cookie vulnerability

SVG - 通过 img 标签设置跨域 cookie 我最近有了解到,浏览器允许使用 meta 标签来设置 cookie 。我不确定我是不是忘了这一特性,或者之...

2936
来自专栏菩提树下的杨过

图片的javascript延时加载

在页面很长(超过3屏)且图片又很多时,默认情况下浏览器会加载所有图片,有可能导致第二屏的图片显示出来了,但第一屏的图片还在加载,这种情况最适合用"javascr...

2236
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

这是一个Flash插件,swf是一种动画格式,实现效果应该是下面的Object内容

1242

扫码关注云+社区

领取腾讯云代金券