基本的表单控件还有html5的一些新的表单控件：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <fieldset>

        <legend>表单</legend>

        <form action="/" method="post">

            账号：<input type="text" name="name" value="" placeholder="请输入..." /><br /><br />

            密码：<input type="password" name="name" value="" maxlength="6" /><br /><br />

            性别：<input type="radio" name="sex" value="" />男&nbsp;&nbsp;<input type="radio" name="sex" value="" />女<br /><br />

            区域：<select>

                <option>北京</option>

                <option>上海</option>

                <option selected="selected">天津</option>

            </select><br /><br />

            分组：<select>

                <optgroup label="华北">

                    <option>北京</option>

                    <option selected="selected">天津</option>

                </optgroup>

                <optgroup label="华东">

                    <option>上海</option>

                    <option>江苏</option>

                </optgroup>

            </select><br /><br />

            多选：<input type="checkbox" name="name" value="" />体育&nbsp;&nbsp;<input type="checkbox" name="name" value="" />唱歌<br /><br />

            文件：<input type="file" name="file" value="" /><br /><br />

            数字：<input type="number" name="name" value="" step="5"/><br /><br />

            滑块：<input type="range" name="name" value="" step="3"/><br /><br />

            重置：<input type="reset" name="name" value="重置" /><br /><br />

            提交：<input type="submit" name="name" value="提交" />

        </form>

    </fieldset>

</body>

</html>

最后效果：

参考：HTML <input> 标签

html——表单控件的更多相关文章

  1. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  2. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  3. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  4. 基于CkEditor实现.net在线开发之路（3）常用From表单控件介绍与说明

    上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...

  5. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  6. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  7. HTML5(常用的表单控件)

    常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...

  8. wicket基础应用(2)--wicket表单控件的使用

    该文可以转载,但转载必须注明作者,出处: 作者:lhx1026 出处:http://lhx1026.iteye.com/ 这一章介绍wicket表单控件的简单应用 1.Label控件 这个应该说是最常 ...

  9. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  10. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

随机推荐

  1. HBase连接数据库（集群）

    一.使用java接口对hbase进行表的创建1.引入需要的jar包2.代码: public static void main(String[] args) throws Exception { //得 ...

  2. JQuery中如何重置(reset)表单(且清空隐藏域)

    由于JQuery中,提交表单是像下面这样的: 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下, ...

  3. Ubuntu 16.04常用快捷键（转）

    注意:在Linux下Win键就是Super键 启动器 Win(长按) 打开启动器,显示快捷键 Win + Tab 通过启动器切换应用程序 Win + 1到9 与点击启动器上的图标效果一样 Win + ...

  4. linux top进程状态D

    什么是D状态 运行在KVM虚拟机里的一些进程突然出了问题,这些出了问题的进程无法用kill杀掉,使用ps可以看到这些进程处于D状态: [build@kbuild-john ~]$ ps -a -o p ...

  5. 《WF in 24 Hours》读书笔记 - Hour 3(1) - Workflow：添加宿主和事件监听

    1. 创建项目组,并添加一个Console Project和Activity Library,在Activity Library的项目中添加CodeActivity1和CodeActivity2,最终 ...

  6. 我的Android进阶之旅------&gt;Android的ListView数据更新后，怎样使最新的条目能够自己主动滚动到可视范围内？

    在ListView的layout配置中加入 android:transcriptMode="alwaysScroll" <ListView android:id=" ...

  7. Java推断和检查网络

    在实践项目中.常常要处理网络异常等问题.为此,专门设计一个类,随时能够使用. import java.io.IOException; import java.net.InetAddress; impo ...

  8. ios逆向工程

    原 ios逆向工程-内部钩子(Method Swizzling)   Method+Swizzling ios hook Method Swizzling(方法调配) 怎么说呢,先了解什么是钩子为什么 ...

  9. Cocos2d-x3.3RC0载入Android的WebView

    代码部分摘自http://www.fusijie.com/blog/2013/12/26/play-cocos2dx-33/ Cocos2d-x3.3RC0通过Jni嵌入Android的WebView ...

  10. 运行Java -jar somefile.jar时发生了什么（二）

    (6)Java.c中的LoadMainClass 位置jdk/src/share/bin/java.c 该方法负责载入main函数所在的类. 该方法首先载入sun.launcher.LauncherH ...