HTML表单

  1. 表单用于获取不同类型的用户输入
  2. 常用表单标签

下面为一个简单的表单:

<!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的更多相关文章

  1. HTML5学习之路

    出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.

  2. html5学习之路_001

    安装环境 安装intellij idea作为开发环境 打开环境 新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如: <!DOCTYPE html> <html ...

  3. html5学习之路_007

    CSS概述 CSS指层叠样式表 CSS样式表极大地提高了工作效率 CSS基础语法 selector { property:value } 例:hi {color:red; font-size:14px ...

  4. html5学习之路_006

    表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. html5学习之路_005

    PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...

  6. html5学习之路_003

    html布局 使用<div>元素布局 使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...

  7. html5学习之路_002

    html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...

  8. 8年,从2D到3D,我的学习之路

    Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

  9. springboot 学习之路 8 (整合websocket(1))

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

随机推荐

  1. pycharm(破解教程)

    1.下载破解补丁 下载补丁文件 jetbrains-agent.jar  2.双击 pycharm-professional-2019.3.exe 安装 pycharm 如果你是刚下载的pycharm ...

  2. unittest 管理用例生成测试报告

    # 登录方法的封装 from appium import webdriver from time import sleep from python_selenium.Slide import swip ...

  3. 【Scala】关于集合的各种知识点

    目录 映射Map 不可变Map 概述 操作实例 可变Map 概述 操作实例 Map的遍历 for循环遍历 格式 操作实例 模式匹配遍历 格式 操作实例 Tuple 元祖 概述 定义格式 获取元素方法 ...

  4. 在一段字符串中的指定位置插入html标签,实现内容修改留痕

    客户需求:实现内容修改留痕,并且鼠标移动到元素时,显示修改人和修改时间. (其实呢本人觉得这个如果是静态的页面,或者是后端拼接好的html,都很好实现,如果让前端动态实现就......) 前端实现的方 ...

  5. SpringData:关联查询

    一.查询方式 1.导航式查询 使用“对象.属性”   进行查询:对于多的查询, 默认就是延迟加载,添加注解@Transactional 在OneToMany 注解中需要添加属性   fetch:值:F ...

  6. html5 canvas 绘制上下浮动的字体

    绘制上下浮动的字体主要思想为先绘制好需要的字体,每隔一定的时间将画布清空,然后再将字体位置改变再绘制上去 如此循环即可. (function(window) { var flowLogo = func ...

  7. k8s big-ip control 安装使用

    k8s big-ip control 安装使用 0. 准备工作 网络打通,这里没有使用fannel,没有使用vxlan . 在f5界面 创建f5分区.这里是cce-test. 1. 安装bigip c ...

  8. React:Lifting State Up

    在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的.在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西.只是 ...

  9. .NetCore对接各大财务软件凭证API——用友系列(1)

    一.前言 今天,我们转战用友系列的第一个产品---T+/Tplus.前两篇文章讲解分享的都是金蝶的产品,因为本身公司牵涉的业务有限,后续有金蝶其他产品的API对接业务时,会继续来分享经验. T+的AP ...

  10. mysql小白系列_04 binlog(未完)

    mysql打开.查看.清理binlog 1.开启日志 log_bin=/var/lib/mysql/mysql-bin mysql> show variables like '%log_bin% ...