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

我只创建了一个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. ubuntu Nvidia driver install

    在图形界面中,有软件和更新,可以使用附加驱动来更新 最上面的驱动是最新版本,英伟达目前Linux最新的版本是375.39 后面的括号,专有意思是代表英伟达自家的驱动,不开源 选择好之后点击应用更改 关 ...

  2. Linux下CenOS系统 安装MariaDB

    1.首先去MariaDB官网下载安装包,首页是:https://mariadb.org/ 2.放在linux下的新建目录下:/root/mariadb 然后解压缩,命令为:tar -xzvf mari ...

  3. SDL 开发实战（五）： SDL 纹理渲染

    本文我们讲一下如何使用SDL_Texture将视频纹理渲染出来. 1. SDL 视频渲染相关对象 SDL 视频渲染主要涉及到四个对象:SDL_Window.SDL_Render.SDL_Texture ...

  4. C++ Opencv remap()重映射函数详解及使用示例

    一.重映射及remap()函数介绍 重映射,就是把一幅图像中某位置的像素放置到另一图像指定位置的过程.即: 在重映射过程中,图像的大小也可以同时发生改变.此时像素与像素之间的关系就不是一一对应关系,因 ...

  5. [Swift]LeetCode190. 颠倒二进制位 | Reverse Bits

    Reverse bits of a given 32 bits unsigned integer. Example 1: Input: 00000010100101000001111010011100 ...

  6. [Swift]LeetCode699. 掉落的方块 | Falling Squares

    On an infinite number line (x-axis), we drop given squares in the order they are given. The i-th squ ...

  7. [Swift]LeetCode798. 得分最高的最小轮调 | Smallest Rotation with Highest Score

    Given an array A, we may rotate it by a non-negative integer K so that the array becomes A[K], A[K+1 ...

  8. 初探React与D3的结合-或许是visualization的新突破？

    自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...

  9. 你真的了解 i++, ++i 和 i+++++i 以及 i+++i++ 吗？

    我想大部分都知道 i++ 和 ++i的区别,i++ 就是先拿i来使用,之后再自增加1,而++i则是先自增加1,在拿i来使用,例如对于下面这两个语句,我敢保证大部分人都会做: int i = 1; Sy ...

  10. MyEclipse 新手使用教程---图文详解

    引言 某天在群里看到有小伙伴问MyEclipse/Eclipse的一些使用问题,虽然在我看来,问的问题很简单,但是如果对于刚刚学习的人来说,可能使用就不那么友好了.毕竟我在开始使用MyEclipse/ ...