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

时间： 2024-10-23 22:13:46

html5学习之路_004的相关文章

前端：HTML5学习之路（一）

第1章 HTML5基础关于HTML5基础这一部分的内容没有明显边界.各种HTML5教材关于HTML5基础知识的介绍大同小异,这里不做过多赘述. 1. 我们要把HTML5简单用起来,首先要学会新建HTML5文档.每个网页都包含doctype.html.head和body元素,以下是一个简单的HTML5文档示例(用到了a.article.em.h1.img和p这6种常见的元素): 1 <!doctype html> 2 <html> 3 <head> 4 <meta

HTML5学习之路——（一）

HTML5简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第一代标准诞生于 1995年,自此 Web 世界经历了巨变,在 HTML4.01 中提出了网页结构与表现相分离的原则,并提供了很多新特性,至此 HTML 的发展遇到瓶颈,停滞不前. HTML5 的第一份草案在 2004年首次被 WHATWG 提交到 W3C,WHATWG 指 Web Hypertext A

html5学习之路_005

PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打印一句话 8.运行项目,必须将项目复制到在htdoc下才能运行 9.打开浏览器运行本站文章为宝宝巴士 SD.Team原创,转载务必在明显处注明:(作者官方网站:宝宝巴士) 转载自[宝宝巴士SuperDo团队] 原文链接: http://www.cnblogs.com/superdo/p/47718

html5学习之路_006

表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与php交互</title> </head> <body> <form action="http://localhost/MyServe/Service.php" method=&quo

Azure云平台学习之路（三）——Cloud Services

1.什么是云服务? 能够部署高度可用的且可无限缩放的应用程序和API.简而言之,就是你写的CMD程序按照一定的框架进行少量修改就能运行在Azure云平台上. 2.Azure云服务有什么特点? (1)专注应用程序而不是硬件,PaaS的一种. (2)支持多种框架和语言. (3)集成了运行状况监视和负载平衡. (4)自动缩放优化成本和性能 3.建立云服务之前,我们需要建立一个云存储,来记录我们的程序的日志信息(当然,这不是必须的) (1)选择左边导航栏的"存储".主面板上显示的是所有已有的存

linux学习之路之LVM

试想一种情况,当初我们在规划磁盘的时候,只给某一个磁盘或分区之划分了30G的容量,但是后来,随着业务的需求,该磁盘或者分区的使用量会越来越大,等到以后再有数据存放时,发现该磁盘或者分区的容量不够用,此时该怎么办了?可以新增一个磁盘,经过格式化,挂载等过程就可以使用这个磁盘了,再将原来磁盘的数据完全的复制过来.等到后来又发现,规划的磁盘又太大了,然后又使用上述方法来减少磁盘的大小.虽然这种方法可行,但是效率低,比较复杂.不应该是我们首选的方法. 当然,我们可以这样做,将多个磁盘或者分区(PV)组合

我的算法学习之路

关于严格来说,本文题目应该是我的数据结构和算法学习之路,但这个写法实在太绕口--况且CS中的算法往往暗指数据结构和算法(例如算法导论指的实际上是数据结构和算法导论),所以我认为本文题目是合理的. 这篇文章讲了什么? 我这些年学习数据结构和算法的总结. 一些不错的算法书籍和教程. 算法的重要性. 初学第一次接触数据结构是在大二下学期的数据结构课程.然而这门课程并没有让我入门--当时自己正忙于倒卖各种MP3和耳机,对于这些课程根本就不屑一顾--反正最后考试划个重点也能过,于是这门整个计算机专业本

一个女大学生的代码学习之路（二）

首先说一下,写这种文章是由于我在四月四日晚上,在手动搭建自己的第一个ssh项目的时候,遇到了一个配置的问题,怎么解决也弄不好,当时是四号晚上九点,我看了一眼表,我就想两个小时之内,我要是能搞定就算行了,但是其实,我搞到三点才OK(凌晨),那时候已经是五号了,转天是一家子去扫墓的时候,结果我居然以这种一个理由没有去,理由是我太累了么?我只是就是搭了一个架子,就是由于我的包太混乱了,导致不兼容,所以tomcat总也不启动,你可能认为好笑,这么简单一个问题怎么就费这多多时间呢,但是作为一个刚接触三框架

HTML5 学习

1.details元素 details元素标识用户要求得到并且可以得到的细节信息,用于描述文档或文档某个部分的细节.它可以与summary元素配合使用.summary元素提供标题或图例.标题是可见的,用户点击标题时,会显示出细节信息,也就是details里面定义的信息. <details> <summary>HTML 5</summary> This document teaches you how to learn about HTML 5 </details&