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 ...
随机推荐
- 解决ASP.NET WebPage的CS1061报错
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pg_CompanyInfo ...
- 谷歌浏览器的F12用处及问题筛查笔记
在前端测试功能的时候,经常有些莫名其妙的错误,这个时候开发会说打开F12看一下吧,所以感觉这个开发者功能很有用,研究一下,做如下记录: Elements:左栏以DOM树形式查看网页源代码(HTML), ...
- 经过踩坑，搭建成功的Appium自动化测试环境
因为最近本人准备搞app自动化,所以就搭建环境过程记录下来(主要踩过好几个坑) 期间有点烦躁,后面调整了下心态还是成功弄好了. 一.Appium环境搭建准备软件 所需要到的软件如下: 1.安装JDK1 ...
- VMware15.5.0安装MacOS10.15.0系统 安装步骤（上）
VMware15.5.0安装MacOS10.15.0系统安装步骤(上)超详细! 说明: 本文是目前最新的安装和调配教程且MacOS10.15和10.16版本搭建方法相同,我也会在一些细节地方加上小技巧 ...
- memcached线程模型
直接上图: memcached使用多线程模型,一个master线程,多个worker线程,master和worker通过管道实现通信. 每个worker线程有一个队列,队列元素为CQ_ITEM. ty ...
- Tunnel Warfare 线段树 区间合并|最大最小值
B - Tunnel WarfareHDU - 1540 这个有两种方法,一个是区间和并,这个我个人感觉异常恶心 第二种方法就是找最大最小值 kuangbin——线段树专题 H - Tunnel Wa ...
- 5G新基建到来，图扑推出智慧路灯三维可视化方案
前言 作为智慧城市的重要组成部分,智慧灯杆管理系统采用信息化.数字化手段,把路灯及城市景观照明等各种不同对象的监控和数据采集及处理融于一体, 为城市管理者进行城市管理.进行科学决策提供了强有力的手段. ...
- VA01销售订单批导问题解决
1业务场景 事务代码:VA01创建销售订单,VA02修改销售订单 可以通过BAPI_SALESORDER_CREATEFROMDAT2批量创建 可以通过BAPI_SALESORDER_CHANGE批量 ...
- Windows 10 IoT Core用PWM控制器控制树莓派LED灯亮度
我接到一个需求,需要调节LED灯的亮度,且是从上位机进行控制,我了解到树莓派也有PWM,就准备通过PWM来控制灯的亮度. PWM又叫脉宽调制,是用微处理器的数字输出来对模拟电路进行控制,对模拟信号电平 ...
- Docker & k8s 系列三：在k8s中部署单个服务实例
本章将会讲解: pod的概念,以及如何向k8s中部署一个单体应用实例. 在上面的篇幅中,我们了解了docker,并制作.运行了docker镜像,然后将镜像发布至中央仓库了.然后又搭建了本机的k8s环境 ...