html表单的各种输入控件
表单的输入控件主要是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表单的各种输入控件的更多相关文章
- Bootstrap3 表单-被支持的控件:输入框
输入框包括大部分表单控件.文本输入域控件,还支持所有 HTML5 类型的输入控件: text.password.datetime.datetime-local.date.month.time.week ...
- Android表单UI及相应控件的事件处理
一.Toast Toast是一种轻量级的提示工具,可显示一行文本对用户的操作进行提示响应 用法:Toast.makeText(context,text,time).show(); context:上下 ...
- Bootstrap3 表单-被支持的控件:文本域
支持多行文本的表单控件.可根据需要改变 rows 属性. <textarea class="form-control" rows="3"></ ...
- BarTender 2016表单中的“秤显示”控件
BarTender 2016中的表单是一个非常实用的工具,它可以实现数据输出提示,查询提示和同一表单的记录选择.这些都离开可供添加的控件,“秤显示”控件也是我们打印尝尝需要涉及的,今天我们就来看看什么 ...
- 深入浅出ExtJS 第四章 表单与输入控件
4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...
- ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...
- FineUI之使用SQL脚本从数据库表中生成对应的输入控件
在WEB开发时.常常须要根据数据库表中的字段建立对应的输入控件,来获取输入的数据.每次都须要按字段来敲,显然太低效.并且easy出错.这里提供一个SQL脚本生成对应输入控件的方法. USE DBDem ...
- HTML 表单元素、 输入类型、Input 属性
<input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...
- WebBrowser无法显示招商银行password输入控件的问题
本文由CharlesSimonyi发表于CSDN博客:http://blog.csdn.net/charlessimonyi/article/details/30479131转载请注明出处 之前就看到 ...
随机推荐
- [转] SSH免密码登陆以及穿越跳板机
原文链接:http://www.cnblogs.com/lucantang/p/3315329.html SSH免密码登陆以及穿越跳板机 1. 免密码直连 [user@hostA ~] $ssh ...
- FM遇到错误RQP-DEF-0354和QE-DEF-0144
版本:Cognos 10.2.1 系统:Win10 操作过程:在FM调用了一个存储过程,其中引用了前端page页面的参数如下图所示,在验证和保存查询主题的时候一直提示参数没有替换值,错误 信息如下图所 ...
- tiny210(s5pv210)移植u-boot(基于 2014.4 版本号)——移植u-boot.bin(打印串口控制台)
在之前我们移植的代码中,都没看到明显的效果,这节我们实现控制台的信息打印. 在上节.我们看到调用 relocate_code 重定位.在 u-boot 的帮助文档 doc/README.arm-rel ...
- POJ 3368 Frequent values (基础RMQ)
Frequent values Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 14742 Accepted: 5354 ...
- Fusioncharts的导出图片訪问官网问题
Fusioncharts3.5使用自带的导出功能,须要訪问官网 问题描写叙述:使用fusioncharts自带的exportchart方法来导出图片的时候.要訪问export.api3.fusionc ...
- ZH奶酪:Linux/Ubuntu 安装/卸载 软件
1.安装.deb文件 以安装Chrome为例: (1)到官方网站下载Chrome浏览器相应版本,比如google-chrome-stable_current_i386.deb: (2)Ctrl+Alt ...
- T-SQL 之 自定义函数
和存储过程很相似,用户自定义函数也是一组有序的T-SQL语句,UDF被预先优化和编译并且作为一个单元进行调用.UDF和存储过程的主要区别在于返回结果的方式. 使用UDF时可传入参数,但不可传出参数.输 ...
- fiddler自动保存请求报文
先来看一张自动保存的请求片段 重点来了,下面是实现的js代码 操作步骤 Fiddler菜单 >> Rules >> Customize Rules 如果提示没有下载Fidd ...
- mac安装热更新插件
查看.修改或者执行某些命令需要root用户的权限,如果不想直接切换到root用户,就可以使用sudo命令.sudo命令用于针对单个命令授予临时权限.sudo仅在需要时授予用户权限,减少了用户因为错误执 ...
- html中title属性换行实现
本文主要讲解titile属性换行的实现方式.<title> 元素可定义文档的标题,可以应用在img.a等标签上. 1.实现方式: <!DOCTYPE html> <htm ...