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

我只创建了一个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. JS监听对象属性改变

    设想这么一个需求: user.name = '张三' 对user数据进行操作的时候,同步的修改页面上的用户名为张三. 这就是个数据绑定的概念. 针对这类需求 ES5提供了Object.definePr ...

  2. 安装与配置Flutter开发环境

    这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter. 由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好 ...

  3. 一文读懂四种常见的XML解析技术

    之前的文章我们讲解了<XML系列教程之Schema技术_上海尚学堂java培训技术干货><XML的概念.特点与作用.XML申明_上海Java培训技术干货>,大家可以点击回顾一下 ...

  4. [Swift]LeetCode135. 分发糖果 | Candy

    There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...

  5. [Swift]LeetCode692. 前K个高频单词 | Top K Frequent Words

    Given a non-empty list of words, return the k most frequent elements. Your answer should be sorted b ...

  6. linux系统安装cdcfordb2udb

    最近接触到db2数据库实时复制的解决方案InfoSphere CDC(Change Database Capture) .主要是通过读取源端的日志信息对目标端进行数据的增删改,从而尽量减少对源端资源的 ...

  7. 参数验证 @Validated 和 @Valid 的区别

    来源:blog.csdn.net/qq_27680317/article/details/79970590 整编:Java技术栈(公众号ID:javastack) Spring Validation验 ...

  8. 北上广等一线城市IT岗位已接近饱和？

    IT行业的技术者,时常被我们戏称为「IT民工」,虽然行业内巨大的人才需求和相对容易得到的高薪在源源不断的吸引各路人马加入,但它依旧在全球最缺人的十大行业中位居榜首. 我身边的朋友大都问过我这样一个疑问 ...

  9. BBS论坛（三十一）

    31.帖子加精和取消加精功能完成 (1)apps/models.py class HighLight(db.Model): __tablename__='highlight_post' id = db ...

  10. ASP.NET中共有哪几种类型的控件？其中，HTML控件、HTML服务器控件和WEB服务器控件之间有什么区别

    ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控件.HTML服务器控件和WEB服务器控件之间的区别如下所示.q      HTM ...