HTML5中表单的创建
一、常用表单标签如下:
(1)<input>中的“type”属性:
复选框-checkbox;单选按钮-radio;按钮-button;提交-submit;
(2)文本域
行-cols;列-rows;
| <form> | 表单 |
| <input> | 输入域 |
| <textarea> | 文本域 |
| <label> | 控制标签 |
| <fieldset> | 定义域 |
| <legend> | 域的标题 |
| <select> | 选择列表 |
| <optgroup> | 选项组 |
| <option> | 下拉列表中的选项 |
| <button> | 按钮 |
二、常见表单标签的应用
1、输入用户名以及密码表单的制作
(1)主要代码:
<form>
用户名:<input type="text" />
密码:<input type="password" />
<br />
</form>
(2)实现效果:

2、复选框的使用:
(1)主要代码:
<form>
你喜欢的水果有?<br />
苹果<input type="checkbox" />
西红柿<input type="checkbox" />
香蕉<input type="checkbox" />
菠萝<input type="checkbox" />
</form>
(2)实现效果:

3、单选按钮的使用:
(1)主要代码:
<form>
请选择您的性别:
男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>
</form>
(2)实现效果:

4、下拉列表的使用
(1)主要代码
<form>
<select>
<option>www.baidu.com</option>
<option>www.jikexueyuan.com</option>
<option>www.google.com</option>
</select>
</form>
(2)实现效果

5、按钮的使用
(1)主要代码
<form>
<input type="button" value="按钮" /><br /> //“value”用来定义按钮上面的值
<input type="submit" /> <br />
<input type="reset" /><br /><br /> //”reset“用来重置表单里的内容
</form>
(2)实现效果

6、文本框的使用
(1)主要代码
<textarea cols="10" rows="15">在此输入文字</textarea>
(2)实现效果

HTML5中表单的创建的更多相关文章
- HTML5中表单验证的8种方法(转)
在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...
- HTML5中表单验证的8种方法
HTML5中表单验证的8种方法 2012-4-21 11:00| 发布者: benben| 查看: 2765| 评论: 0 摘要: 前一篇,我们介绍了HTML5中新的表单特性和函数, 今天就继续来谈谈 ...
- HTML5中表单元素的formaction属性
在submit按钮中,根据不同的submit按钮,将表单提交到不同的页面中: <form id="test" action="test.jsp"> ...
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
来源:GBin1.com 在线演示 在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- html5表单重写
html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...
- HTML5: HTML5 表单属性
ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...
- 118.django中表单的使用方式
表单 HTML中的表单: 从前端来说,表单就是用来将数据提交给服务器的,不管后台使用的是django还是php等其他的语言.只要把input标签放在form标签中,然后再添加一个提交的按钮,就可以将i ...
随机推荐
- TYVJ P1022 进制转换 Label:坑
背景 太原成成中学第3次模拟赛 第2道 描述 对于十进制整数N,试求其-2进制表示.例如,因为 1*1 + 1*-2 + 1*4 + 0*-8 +1*16 + 1*-32 = -13 ,所以(-13) ...
- telerik 某些ajax拿数据方式下 load on demand 不起作用
方法一:加入以下代码 <%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("teleri ...
- virsh命令
查看虚拟机: [root@super67 ~]# virsh list Id Name State --------------------- ...
- maven 将依赖的jar包打入jar包中
pom中加入以下代码,利用mvn assembly:assembly就可以了. <build> <plugins> <plugin> <artifactId& ...
- sql对应C#的类型
- 清除行内元素之间HTML空白的几种解决方案
行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...
- Maven学习记录
一.简单介绍 Maven 是一个项目构建和管理自动化工具,通过它可以便捷的管理项目的生命周期,包括项目的jar包依赖,开发,测试,发布,打包等. 二.基本概念 2.1 Pom - 项目对象模型 全称( ...
- Apache POI使用详解
Apache POI使用详解 1.POI结构与常用类 (1)POI介绍 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案 ...
- [转]在VS2010 VC++项目中引用Lib静态库(以Openssl为例)
本文转自:http://kb.cnblogs.com/page/94467/ Openssl是个为网络通信提供安全及数据完整性的一种安全协议,囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SS ...
- Win10开始菜单打不开?两个办法可破
很多人在安装Windows10后,都遇到过开始菜 单无法打开和Cortana框架无法输入文字的问题, 这种问题在系统更新后特别频繁.Windows会报错 为关键错误,并提示在下次登录会进行解决,同时要 ...