来认识更多的表单吧，增加知识面

我只创建了一个index.html帮助你认识它们

以下是代码

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset = "utf-8">
 </head>
 <body>
 <!--单按钮输入(单选)-->
 <form action = "" method = "POST">
 <input type = "radio" name = "yesorno" value = "yes">Y</input>        <!--<input>和</input>中间夹的东西在网页上显示-->            <!--一个类型的选项推荐用同样的name值，增强代码可读性-->
 <br>
 <input type = "radio" name = "yesorno" value = "no">N</input>
 </form>
 <hr>        <!--分割线-->
 <!--复选框输入(多选)-->
 <form action = "" method = "POST">        <!--你也可以写在一个表单里，我为了让你更清楚得读代码，所以就没那样做-->
 <input type = "checkbox" name = "spice" value = "Salt">Salt</input>
 <br>
 <input type = "checkbox" name = "spice" value = "Pepper">Pepper</input>
 <br>
 <input type = "checkbox" name = "spice" value = "Garlic">Garlic</input>
 </form>
 <hr>
 <!--表单里只有input元素吗？大错特错!!!-->
 <form action = "" method = "POST">        <!--文本区-->
 <textarea name = "name" rows = "10" cols = "50">My name is </textarea><!--<textarea>和</textarea>中间夹着的东西作为文本区里的起始文本-->
 </form>
 <hr>
 <p>
 你喜欢什么颜色?
 </p>
 <form action = "" method = "POST">
 <select name = "color">                        <!--菜单-->
 <option value = "Black">黑色</option>        <!--菜单选项-->
 <option value = "White">白色</option>
 <option value = "Blue">蓝色</option>
 <option value = "Red">红色</option>
 </select>
 </form>
 <hr>
 <form action = "" method = "POST">
 <input type = "number" min = "0" max = "9">        <!--输入数字-->
 </form>
 <hr>
 <form action = "" method = "POST">
 <input type = "range" min = "0" max = "15" step = "5">        <!--范围输入-->
 </form>
 <hr>
 <form action = "" method = "POST">
 <input type = "date">        <!--输入日期-->
 </form>
 <hr>
 <!--下面这三种input元素都是文本输入的变种，可以在移动设备的浏览器中看到定制键盘-->

 <form action = "" method = "POST">
 <input type = "email">        <!--输入Email-->
 <input type = "tel">        <!--输入电话号码-->
 <input type = "url">        <!--输入url-->
 </form>
 </body>
 </html>

以下是显示效果

 

发挥你的想象力创造出更整洁，更有用的表单

//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买

转载请注明出处  by:M_ZPHr

最后修改日期：2019-01-17

#WEB安全基础 : HTML/CSS | 0x10.1更多表单的更多相关文章

  1. #WEB安全基础 : HTML/CSS | 0x10实现交互_表单

    先看看表单如何工作吧 请求   响应   简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件   这是显示   你可以向空白框框 ...

  2. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  3. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  4. 【ASP.NET Web API教程】5.2 发送HTML表单数据：URL编码的表单数据

    原文:[ASP.NET Web API教程]5.2 发送HTML表单数据:URL编码的表单数据 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...

  5. 范仁义html+css课程---7、表单

    范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...

  6. 【ASP.NET Web API教程】5.3 发送HTML表单数据：文件上传与多部分MIME

    原文:[ASP.NET Web API教程]5.3 发送HTML表单数据:文件上传与多部分MIME 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面 ...

  7. #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST

    HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...

  8. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

  9. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

随机推荐

  1. C# 数组结构

    数组结构: Array :在内存上是连续分配的,而且元素类型是一致的: 特点:是读取快 可以坐标访问 但是增删慢,长度不能变 比如 int[] intArray=new int[20]; intArr ...

  2. APP研发录笔记

    一.消灭全局变量 在内存不足时,系统会回收一部分闲置的资源,由于App被切换到后台,所以之前存放的全局变量很容易被回收,这时再切换到前台继续使用,会报空指针崩溃.想彻底解决这个问题,就要使用序列化. ...

  3. Python微信公众号开发—小白篇

    本文面向想通过Python学习公众号开发的同学.一站式解决新手开发微信公众号遇到的所有问题. 为了防止我的文章被到处转载,贴一下我的公众号[智能制造专栏],欢迎大家关注. github仓库地址http ...

  4. Python爬虫5-利用usergent伪装访问方式

    GitHub代码练习地址:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac08_useragent.py UserAgen ...

  5. SQL 常用语法记录

    SQL语法 注意:SQL 对大小写不敏感 可以把 SQL 分为两个部分:数据操作语言 (DML) 和 数据定义语言 (DDL). 数据操作语言 (DML) SQL (结构化查询语言)是用于执行查询的语 ...

  6. [Swift]LeetCode30. 与所有单词相关联的字串 | Substring with Concatenation of All Words

    You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...

  7. Java进阶——带你入门分布式中的Nginx

    如何实现服务器之间的协同功能呢? 通过 Nginx 提供的反向代理和负载均衡功能,可以合理的完成业务的分配,提高网站的处理能力:同时利用缓存功能,还可以将不需要实时更新的动态页面输出结果,转化为静态网 ...

  8. pytorch学习：准备自己的图片数据

    图片数据一般有两种情况: 1.所有图片放在一个文件夹内,另外有一个txt文件显示标签. 2.不同类别的图片放在不同的文件夹内,文件夹就是图片的类别. 针对这两种不同的情况,数据集的准备也不相同,第一种 ...

  9. CDN边缘节点容器调度实践（下）

    5月27日,OSC 源创会在上海成功举办.又拍云系统开发高级工程师黄励博在大会分享了<CDN 边缘节点容器调度的实践>.主要介绍又拍云自主开发的边缘节点容器调度方案,从 0 到 1 ,实现 ...

  10. Java8虚拟机内存模型

    1.  Java虚拟机运行时数据区 在JDK1.8之前,JVM运行时数据区分为堆.虚拟机栈.本地方法栈.方法区.程序计数器.如下图所示: 虚拟机栈:线程私有,随线程创建而创建.栈里面是一个一个“栈帧” ...