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

我只创建了一个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. easyui自定义皮肤及缺陷修改

    引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...

  2. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  3. Python开发虚拟环境使用virtualenvwrapper的搭建及pycharm链接步骤

    virtualenv 是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包.创建的环境是独立的,互不干扰,无需sudo ...

  4. [Swift]LeetCode24. 两两交换链表中的节点 | Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. Example: Given 1->2->3 ...

  5. Nginx篇--Nginx源码搭建

    Nginx安装步骤: 1.依赖 gcc openssl-devel pcre-devel zlib-devel    安装:yum install gcc openssl-devel pcre-dev ...

  6. shell的exec命令

    工作中遇到运维人员挂supervisor的时候建议启动使用命令control.sh start, 并且在control.sh 里面启动命令: exec -c ./bin/xxx -f config/x ...

  7. Docker技术知识点总结

    Docker技术知识点总结 本文宿主机环境Centos7.4Docker version 18.09.2, build 6247962采用国内 Daocloud 加速器---------------- ...

  8. Redis学习——Windows环境下Redis的安装（二）

    一.说明 之前介绍了Linux环境下Redis的安装,这次介绍一下Windows环境下Redis的安装,首先要讲的是,Redis官方只支持Linux,还好 Microsoft Open Tech gr ...

  9. Android--SurfaceView播放视频

    前言 本篇博客讲解一下如何在Android下,使用SurfaceView播放一个视频流媒体.之前有讲到如何使用MediaPlayer播放音频流媒体,其实MediaPlayer还可以播放视频,只需需要S ...

  10. 图像识别基本算法之SURF

    图像识别.人脸识别可行的算法有很多.但是作为学习,如果能理清这个问题研究的历程及其主线,会对你深入理解当前研究最新的发展有很多帮助.本文是自己在学习过程中的笔记,大多内容来自于网络,出处请参考最后的引 ...