表单的输入控件主要是input和select。其中input可以是多种类型，通过type属性来进行定义，type可以取值是text,radio,checkbox,password,submit,reset.

select是和option组合使用的。后台要想获得表单的值，是通过name属性的值来获得用户的输入。

后台获取的值：

input-text-name

input-redio-name-value

input-checkbox-name-value

input-password-name

input-textarea-name

select-option-name-value

下面是综合应用这些组成一个注册表单。

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8">

 <title></title>

</head>

<body>

 <center>

  <h1 style="color:blue;">注册表单</h1>

  <hr/>

  <form name="reg" action="regsuccess.html" method="post">

  <table cellspacing="" cellpadding="" border="">

   <tr>

    <td>用户名:</td>

    <td><input type="text" name="username"/></td>

   </tr>

   <tr>

    <td>密码：</td>

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

   </tr>

   <tr>

    <td>确认密码：</td>

    <td><input type="password" name="confirmpwd"/></td>

   </tr>

   <tr>

    <td>电子邮箱：</td>

    <td><input type="text" name="email"/></td>

   </tr>

   <tr>

    <td>性别：</td>

    <td><input type="radio" name="gender" value='' checked/>男<input type="radio" name="gender" value=''/>女</td>

   </tr>

   <tr>

    <td>学历：</td>

    <td>

     <select name="edulevel"/>

      <option value="-1">--请选择学历--</option>

      <option value="">小学</option>

      <option value="">初中</option>

      <option value="">高中</option>

      <option value="">学士</option>

      <option value="">硕士</option>

      <option value="">博士</option>

      <option value="">博士后</option>

    </td>

   </tr>

   <tr>

    <td>爱好：</td>

    <td>

     <input type="checkbox" name="hoby" value="reading"/>读书

     <input type="checkbox" name="hoby" value="movie"/>电影

     <input type="checkbox" name="hoby" value="shopping"/>购物

     <input type="checkbox" name="hoby" value="internet"/>上网

     <input type="checkbox" name="hoby" value="other"/>其他

    </td>

   </tr>

   <tr>

    <td>上传头像：</td>

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

   </tr>

   <tr>

    <td>服务协议：</td>

    <td><textarea rows="" cols="">rule </textarea></td>

   </tr>

   <tr>

    <td>是否接受协议：</td>

    <td><input type="checkbox"name='rule'value='accept'/>接受</td>

   </tr>

   <tr>

    <td colspan="" align="center"><input type="submit" value="注册">

    <input type="reset" value="重置"/></td>

   </tr>

  </table>

  </form>

 </center>

</body>

</html>

显示效果如下：

html表单的各种输入控件的更多相关文章

  1. Bootstrap3 表单-被支持的控件:输入框

    输入框包括大部分表单控件.文本输入域控件,还支持所有 HTML5 类型的输入控件: text.password.datetime.datetime-local.date.month.time.week ...

  2. Android表单UI及相应控件的事件处理

    一.Toast Toast是一种轻量级的提示工具,可显示一行文本对用户的操作进行提示响应 用法:Toast.makeText(context,text,time).show(); context:上下 ...

  3. Bootstrap3 表单-被支持的控件:文本域

    支持多行文本的表单控件.可根据需要改变 rows 属性. <textarea class="form-control" rows="3"></ ...

  4. BarTender 2016表单中的“秤显示”控件

    BarTender 2016中的表单是一个非常实用的工具,它可以实现数据输出提示,查询提示和同一表单的记录选择.这些都离开可供添加的控件,“秤显示”控件也是我们打印尝尝需要涉及的,今天我们就来看看什么 ...

  5. 深入浅出ExtJS 第四章 表单与输入控件

    4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...

  6. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field（转）

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  7. FineUI之使用SQL脚本从数据库表中生成对应的输入控件

    在WEB开发时.常常须要根据数据库表中的字段建立对应的输入控件,来获取输入的数据.每次都须要按字段来敲,显然太低效.并且easy出错.这里提供一个SQL脚本生成对应输入控件的方法. USE DBDem ...

  8. HTML 表单元素、 输入类型、Input 属性

    <input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...

  9. WebBrowser无法显示招商银行password输入控件的问题

    本文由CharlesSimonyi发表于CSDN博客:http://blog.csdn.net/charlessimonyi/article/details/30479131转载请注明出处 之前就看到 ...

随机推荐

  1. EM算法求高斯混合模型參数预计——Python实现

    EM算法一般表述:       当有部分数据缺失或者无法观察到时,EM算法提供了一个高效的迭代程序用来计算这些数据的最大似然预计.在每一步迭代分为两个步骤:期望(Expectation)步骤和最大化( ...

  2. C#.NET常见问题(FAQ)-Visual Studio VS如何显示行号

    工具-选项,然后勾选"显示所有设置",然后在文本编辑器下面找到所有语言,勾选"行号"即可.     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: ...

  3. ubuntu Server 安装 php5

    ubuntu Server 安装 php5 1:如果你的服务器已经安装了apache2组件,那么在安装php5时,可以把对应apache2的php5组件一起安装 sudo apt-get instal ...

  4. Oracle function实现根据输入的日期以及天数，获取此日期之后的天数的工作日

    前提:在法定节日表(t_fdjr )中维护法定节日包括周六周天 /** * 功能描述:根据输入的日期以及天数,获取此日期之后的天数的工作日 * 输入参数: * i_date YYYY-MM-DD * ...

  5. Node FS 读取文件中文乱码解决

    1:首先保证源文件编码方式为UTF-8 2:读取代码,设置编码方式rs.setEncoding('utf8') var fs = require('fs'); var rs = fs.createRe ...

  6. 事务的四大特性ACID介绍

    事务是恢复和并发控制的基本单位.ACID 事务应该具有4个属性:原子性.一致性.隔离性.持续性.这四个属性通常称为ACID特性. 原子性(atomicity).一个事务是一个不可分割的工作单位,事务中 ...

  7. python 2.7疑难问题之 编码

    #http://www.cnblogs.com/bluescorpio/p/4303656.html •在遇到错误提示时,注意查看错误提示内容,同时注意查看type类型. 1.TypeError: d ...

  8. 通过Java发送邮件和接收邮件的工具类

    一.第一种 使用SMTP协议发送电子邮件 第一步:加入mail.jar包 (1)简单类型 package com.souvc.mail; import java.util.Date; import j ...

  9. 科普：TLS、SSL、HTTPS以及证书（转）

    最近在研究基于ssl的传输加密,涉及到了key和证书相关的话题,走了不少弯路,现在总结一下做个备忘 不少人可能听过其中的超过3个名词,但它们究竟有什么关联呢? TLS是 传输层安全协议(Transpo ...

  10. @NotEmpty、@NotNull 和 @NotBlank 的区别

    1. 三者主要区别如下: @NotEmpty :用于集合类,不能为null,且size>0 @NotNull:不能为null,但可以为empty,没有size的约束 @NotBlank:只用于S ...