表单的输入控件主要是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. TJ Holowaychuk是怎样学习编程的?

    TJ Holowaychuk是怎样学习编程的? 学习了:https://blog.csdn.net/wozaixiaoximen/article/details/49507111 Q:TJ Holow ...

  2. RS交叉表自动汇总后百分比列显示错误之解决方案

    可以说在从事Cognos开发的过程中,仅仅对数据展现而言,大多数用户使用最多的工具便是Report Studio了,此工具可以帮助我们快速的构建一些可供用户自主选择的数据报告.当然我个人认为没有什么开 ...

  3. [Sass] Level 3: Mixin -- Ex

    When to use MIXIN? Better way to use MIXIN is when you deal with browser prefiex, for example: @mixi ...

  4. [Node.js]33. Level 7: Persisting Questions

    Let's go back to our live-moderation app and add some persistence, first to the questions people ask ...

  5. swift语言实现单例模式

    Swift实现单例模式 单例模式在各个语言中都有实现,swift语言推出已经几天了.通过这几天的看文档.特奉上写的Swift的单例实现,供大家学习交流,欢迎指正. ---若转载请注明出处,本人Gith ...

  6. layer获取iframe内容

    var layer1 = function() { layer.open({ type: 2, title: '标题', maxmin: false, area: ['780px', '600px'] ...

  7. ZH奶酪:PHP判断图片格式的7种方法

    以图片 $imgurl = "http://www.php10086.com/wp-content/themes/inove/img/readers.gif"; 为例: 思路1. ...

  8. git 使用流程(使用代码库github)

    一:先在github 上注册账号,并创建一个项目: 二:mac 命令行-进入自己的工作空间 1:建立库     git init 2:初始化配置 git config --global user.na ...

  9. ios的坑 无痕模式

    我们的一个小应用,用localStorage做了下缓存,测试上线之后有反馈页面数据拉取不到, 最后定位到是localStorage有问题. 是Private Browsing Mode引起的.然后查看 ...

  10. 解决运行Maven是报错:No goals have been specified for this build

    pom.xml文件<build>标签后面加上<defaultGoal>compile</defaultGoal>即可