表单的输入控件主要是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. Kettle中调用用户自定义的jar包

    ETL工具断断续续的也接触了 Informatica,Kettle, SSIS,个人感觉Info很强大但是也很贵,而且有着一些神秘感.Kettle 4.0版本以来已经有了User  defined j ...

  2. N年的经验在别人眼里是怎么看的？

    很多人简历上都喜欢总结这么一句话:N年XXX领域的经验.N值越大,似乎越NB. 可是,我怎么看到很多人做了几十年的饭,水平变化不大,和专业厨师还是差得远. 还有写一辈子字的,开一辈子车的,这些人也和专 ...

  3. （LeetCode 141/142）Linked List Cycle

    1.Given a linked list, determine if it has a cycle in it. 2.Given a linked list, return the node whe ...

  4. JavaScript三（语法、关键保留字及变量)

    基本概念 一.区分大小写 在ECMAScript中的一切(变量.函数名.操作符)都是区分大小写的. 如变量名test和Test分别表示两个不同的变量, 二.标识符 所谓标识符,就是指变量.函数.属性的 ...

  5. 《Java并发编程实战》第九章 图形用户界面应用程序界面 读书笔记

    一.为什么GUI是单线程化 传统的GUI应用程序通常都是单线程的. 1. 在代码的各个位置都须要调用poll方法来获得输入事件(这样的方式将给代码带来极大的混乱) 2. 通过一个"主事件循环 ...

  6. js 数组清空 方法 汇总

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 关于DES加密中的 DESede/CBC/PKCS5Padding

    今天看到一段3DES加密算法的代码,用的参数是DESede/CBC/PKCS5Padding,感觉比较陌生,于是学习了一下. 遇到的java代码如下: Cipher cipher=Cipher.get ...

  8. python之函数用法execfile()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法execfile() #execfile() #说明:用来执行一个文件,相对于双击的效 ...

  9. DevExpress添加Winform窗体到DockPanel

    在使用DevExpress过程中,原先已经创建好的导航窗体,如何添加到DockPanel中进行展示? FormX frmX = new FormX(); frmX.Show(this.DockPane ...

  10. 商家 APP 如何接入新版支付宝支付，老版本商家如何升级

    代码地址如下:http://www.demodashi.com/demo/14006.html 前言 支付宝移动支付2.0版本对比1.0版本做了较大更新,新申请的商家都需要采用最新2.0版本 SDK ...