html5学习之路_004
HTML表单
- 表单用于获取不同类型的用户输入
- 常用表单标签
下面为一个简单的表单：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
用户名：
<input type="text">
密码：
<input type="password">
<form>
</body>
</html>
运行结果如下图“
常用的表单:
- 复选框
- 单选按钮
- 下拉列表
- 文本域
- 创建按钮
复选框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
你喜欢的水果有？
<p></p>
复选框
<br/>
苹果<input type="checkbox">
西红柿<input type="checkbox">
香蕉<input type="checkbox">
<form>
</body>
</html>
复选框可以选择多个选项，类型为checkbox，运行结果如下：
单选框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
请选择您的性别：
男<input type="radio" name="sex">
女<input type="radio" name="sex">
<form>
</body>
</html>
单选框类型为radio，标记name为同一个组，只能选一个选项，如果name值不同，则不能单选，运行结果如下：
下拉列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
下拉列表
<br/>
请选择网站：
<select>
<option>www.jikexueyuan.com</option>
<option>www.google.com</option>
<option>www.hven.org</option>
</select>
<form> </body>
</html>
运行结果如下图：
文本域
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<textarea cols="=30" rows="30">请在此填写个人信息</textarea>
</body>
</html>
运行结果如下图：
创建按钮
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
创建按钮
<br/>
<input type="button" value="按钮">
<input type="submit" value="确定">
</form>
</body>
</html>
类型为button，给予文字value，运行结果如下：
本站文章为宝宝巴士 SD.Team原创，转载务必在明显处注明：（作者官方网站：宝宝巴士)
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4771792.html
html5学习之路_004的更多相关文章
- HTML5学习之路
出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.
- html5学习之路_001
安装环境 安装intellij idea作为开发环境 打开环境 新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如: <!DOCTYPE html> <html ...
- html5学习之路_007
CSS概述 CSS指层叠样式表 CSS样式表极大地提高了工作效率 CSS基础语法 selector { property:value } 例:hi {color:red; font-size:14px ...
- html5学习之路_006
表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- html5学习之路_005
PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...
- html5学习之路_003
html布局 使用<div>元素布局 使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...
- html5学习之路_002
html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...
- 8年，从2D到3D，我的学习之路
Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...
- springboot 学习之路 8 (整合websocket(1))
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
随机推荐
- Codeforces Round #626 D. Present
D. Present 题目大意:给你一个大小是n的序列,求两两之间相加进行异或之后的答案. 这个题目我并没有想到怎么写,有点偷懒于是就去看了题解.. 题解很套路... 题解: 因为这个是用到了异或,所 ...
- Programmatically add an application to Windows Firewall
Programmatically add an application to Windows Firewall 回答1 Not sure if this is the best way, but ...
- OpenWrt（LEDE）2020.4.12编译 UnPnP+NAS+多拨+网盘+DNS优化+帕斯沃 无缝集成
固件说明 基于Lede OpenWrt R2020.4.8版本(源码截止2020.4.12)Lienol Feed及若干自行维护的软件包 结合家庭x86软路由场景需要定制 按照家庭应用场景对固件及软件 ...
- 基于C语言的Q格式使用详解
用过DSP的应该都知道Q格式吧: 目录 1 前言 2 Q数据的表示 2.1 范围和精度 2.2 推导 3 Q数据的运算 3.1 0x7FFF 3.2 0x8000 3.3 加法 3.4 减法 3.5 ...
- [hdu5373 The shortest problem]模拟
http://acm.hdu.edu.cn/showproblem.php?pid=5373 思路:按题意来即可. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- tp5.1的事务操作
普通的事务操作很简单,最简单的方式是使用 transaction 方法操作数据库事务, 当闭包中的代码发生异常会自动回滚, 例如: Db::transaction(function () { Db:: ...
- 关于 Blob
博客地址:https://ainyi.com/88 对于 Blob,前端开发中可能比较少遇到:数据库中可使用 Blob 概念,例如 Mysql 存储二进制数据的类型就是 Blob,也就是说图片可存储于 ...
- PAT1027 Colors in Mars (20分) 10进制转13进制
题目 People in Mars represent the colors in their computers in a similar way as the Earth people. That ...
- [Abp vNext 入坑分享] - 7.Automapper与validation的使用
简要说明 [项目源码] [章节目录] 本文主要介绍Automapper与Validation的使用方法.首先使用Automapper的目的是引入组件完成entity与dto之间的转换以达到简化代码的目 ...
- windows假死原因调查
0. 现象 windows假死了,键盘功能正常,就是画面卡住不动了. 1. 看log linux下面很容易通过命令dmesg和/var/log/message来看日志. 但是windows就懵逼了,不 ...