HTML 表单用于搜集不同类型的用户输入。

一、<form> 标签

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单用于向服务器传输数据。

（注释：form 元素是块级元素，其前后会产生折行。<input> 元素是最重要的表单元素。）

常见<input>元素的type属性值

类型 描述
text 定义常规文本输入。
password 定义密码输入
submit 定义提交按钮（提交表单）
radio 定义单选按钮输入（选择多个选择之一）
checkbox 定义复选框
 

二、input元素的type属性值

（1）文本输入
<input type='text'>用于定义文本输入的单行输入字段。
  1. <html>
  2. <body>
  3. <!-- This is a comment -->
  4. <form>
  5. First name:<br />
  6. <input type='text' name='firstname'>
  7. <br />
  8. Last name:<br />
  9. <input type='text' name='lastname'>
  10. </form>
  11. </body>
  12. </html>
  13.  
  14. 运行结果：
    First name:
  15.  
  16. Last name:

（2）密码输入

<input type="password"> 定义密码字段。

password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

  1. <html>
  2. <body>
  3. <!-- 表单处理程序在action属性中指定 -->
  4. <form action="action_page.php">
  5. Username:<br/>
  6. <input type='text' name='username'><br/>
  7. Password:<br/>
  8. <input type='password' name='psw'><br/>
  9. <input type="submit" value="提交查询">
  10. </form>
  11. </body>
  12. </html>

运行结果：

（3）提交按钮

 <input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

  1. <html>
  2. <body>
  3. <!-- 表单处理程序在action属性中指定 -->
  4. <form action='action_page.php'>
  5. First name:<br />
  6. <!--value值即为默认填写值-->
  7. <input type='text' name='firsname' value='Micky'>
  8. <br />
  9. Last name:<br />
  10. <input type='text' name='lastname' value='Mouse'>
  11. <br />
  12. <input type='submit' value='提交'>
  13. </form>
  14. </body>
  15. </html>
  16.  
  17. 运行结果：
    First name:
  18.  
  19. Last name:
  1. 提交
 
  1.  

action 属性：定义在提交表单时执行的动作。如果省略 action 属性，则 action 会被设置为当前页面。

method 属性：规定在提交表单时所用的 HTTP 方法（默认GET）。

name 属性：规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识。

  1. <form action="action_page.php" method="POST">

PS：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

 （4）单选按钮输入

<input type="radio"> 定义单选按钮。

  1. <html>
  2. <body>
  3. <!-- This is a comment -->
  4. <form>
  5. <input type='radio' name='sex' value='male' checked>Male
  6. <!--checked设置预先选定的按钮，即默认选定的按钮-->
  7. <br />
  8. <input type='radio' name='sex' value='female'>Female
  9. </form>
  10. </body>
  11. </html>
  12.  
  13. 运行结果：
    Male
  14. Female

（5）checkbox复选框

<input type="checkbox"> 定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

  1. <html>
  2. <body>
  3. <!-- 表单处理程序在action属性中指定 -->
  4. <form action="action_page.php">
  5. <input type='checkbox' name='cat' value='CAT'>Cat
  6. <br/>
  7. <input type='checkbox' name='dog' value='DOG'>Dog
  8. </form>
  9. </body>
  10. </html>

运行结果：

参考：https://www.w3school.com.cn

 

HTML -- 表单元素1的更多相关文章

  1. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  3. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  4. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  6. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  7. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  8. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

  9. iScroll4下表单元素聚焦及键盘的异常问题

    本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...

  10. 9月8日HTML表单元素（form、文本、按钮、选择）

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...

随机推荐

  1. vue scss 样式穿透

    使用2个style的方式不够优雅,可以使用下面方式做样式穿透 .normal-field /deep/ .el-form-item { margin-bottom: 0px; } .normal-fi ...

  2. 【Spring注解驱动开发】使用@Autowired@Qualifier@Primary三大注解自动装配组件，你会了吗？

    写在前面 [Spring专题]停更一个多月,期间在更新其他专题的内容,不少小伙伴纷纷留言说:冰河,你[Spring专题]是不是停更了啊!其实并没有停更,只是中途有很多小伙伴留言说急需学习一些知识技能, ...

  3. 使用Postman工具做接口测试(五)——生成随机参数

    引言 我们平时使用最多的接口调试工具就是postman了,比如开发将一个接口给到你,你想看看接口是否正常.最常用的方法就是用postman去调一下.如果通,就写接口测试用例,反之,将开发打一顿吧o(* ...

  4. .NET Core + K8S + Apollo 玩转配置中心

    1.引言 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理 ...

  5. TCP协议中的三次握手和四次挥手(图解)-转

    转自:http://blog.csdn.net/whuslei/article/details/6667471/ 建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看 ...

  6. Nordic52840SDK学习之定时器

    Nordic 52840 SDK学习之定时器 今天开始学习52840SDK,特在此处记录学习内容,防止以后忘记,或许可以给以后的初学者提供一些帮助.如有错误,请发邮件至843036544@qq.com ...

  7. markdown 绘图利器之granphviz

    目录 概述 graphviz 脚本语法结构 图 方向,尺寸,间距 节点 shape 属性 多边形 record-based 的形状 用户定制 label 属性 基本用法 HTML用法 style 属性 ...

  8. 2020.5.24 第四篇 Scrum冲刺博客

    Team:银河超级无敌舰队 Project:招新通 项目冲刺集合贴:链接 目录 一.每日站立会议 1.1 会议照片 1.2 项目完成情况 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3. ...

  9. Java程序员值得拥有的TreeMap指南

    先看再点赞,给自己一点思考的时间,微信搜索[沉默王二]关注这个有颜值却假装靠才华苟且的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题 ...

  10. Apache Hudi 0.6.0版本重磅发布

    1. 下载信息 源码:Apache Hudi 0.6.0 Source Release (asc, sha512) 二进制Jar包:nexus 2. 迁移指南 如果您从0.5.3以前的版本迁移至0.6 ...