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

一、<form> 标签

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

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

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

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

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

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

二、input元素的type属性值

（1）文本输入
<input type='text'>用于定义文本输入的单行输入字段。
<html>

<body>

<!-- This is a comment -->

<form>

First name:<br />

<input type='text' name='firstname'>

<br />

Last name:<br />

<input type='text' name='lastname'>

</form>

</body>

</html>

运行结果：
First name:

Last name:

（2）密码输入

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

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

<html>

<body>

<!-- 表单处理程序在action属性中指定 -->

<form action="action_page.php">

Username:<br/>

<input type='text' name='username'><br/>

Password:<br/>

<input type='password' name='psw'><br/>

<input type="submit" value="提交查询">

</form>

</body>

</html>

运行结果：

（3）提交按钮

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

<html>

<body>

<!-- 表单处理程序在action属性中指定 -->

<form action='action_page.php'>

First name:<br />

<!--value值即为默认填写值-->

<input type='text' name='firsname' value='Micky'>

<br />

Last name:<br />

<input type='text' name='lastname' value='Mouse'>

<br />

<input type='submit' value='提交'>

</form>

</body>

</html>

运行结果：
First name:

Last name:


提交
 
 

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

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

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

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

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

 （4）单选按钮输入

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

<html>

<body>

<!-- This is a comment -->

<form>

<input type='radio' name='sex' value='male' checked>Male

<!--checked设置预先选定的按钮，即默认选定的按钮-->

<br />

<input type='radio' name='sex' value='female'>Female

</form>

</body>

</html>

运行结果：
Male

Female

（5）checkbox复选框

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

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

<html>

<body>

<!-- 表单处理程序在action属性中指定 -->

<form action="action_page.php">

<input type='checkbox' name='cat' value='CAT'>Cat

<br/>

<input type='checkbox' name='dog' value='DOG'>Dog

</form>

</body>

</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. Qt 信号发射部分 undefined reference to错误

    在使用信号与槽很容易发生 undefined reference to 发射信号  ①继承QObject ②添加Q_OBJECT ③执行qmake ④构建 然后就可以运行啦!但是不知道是为什么,悄咪咪 ...

  2. 精灵小巧的 Jsonpath 万精油：Snack3

    前几天和一个群里的朋友交流一个需求:在 Json 里像 XPath 一样找出节点,并修改值,然后输出新的Json. 很多人马上就会说,Jsonpath 啊. 是的 Jsonpath 确实能快速找出节点 ...

  3. node-sass 报错的解决方法

    今天在运行项目发现原来好好的项目报错了.报错大致信息如下: 这段代码是我升级node之后里面根据不同的项目位置什么的会有所不同. 简单的说,这段代码意思是node-sass 不兼容 node v8 的 ...

  4. 使用 codeblocks 编写C++ udp组播程序遇到的问题

    编译错误 会出现好多undefined reference to'WSAStartup to@8之类的错误,都是undefind开头的 解决方法: Settings -> Compiler se ...

  5. python基础 Day12

    python Day12 生成器python社区,生成器与迭代器看成一种.生成器的本质就是迭代器. 区别:生成器是我们自己用python代码构建的数据结构.迭代器都是提供的,或者转化得来的. 获取生成 ...

  6. 内存不够用还要速度快，终于找到可以基于 File 的 Cache 了

    一:背景 1. 讲故事 18年的时候在做纯内存项目的过程中遇到了这么一个问题,因为一些核心数据都是飘在内存中,所以内存空间对我们来说额外宝贵,但偏偏项目中有些数据需要缓存,比如说需要下钻的报表上的点, ...

  7. 新建一个Vue项目

    node环境以及vue的安装可查看:https://www.cnblogs.com/renlywen/p/13522869.html 第一步:创建项目 终端输入: vue init webpack d ...

  8. SPSSAU数据分析思维培养系列1：数据思维篇

    今天,SPSSAU给大家带来[数据分析思维培养]系列课程.主要针对第一次接触数据分析,完全不懂分析的小白用户,或者懂一些简单方法但苦于没有分析思路,不知道如何规范化分析. 本文章为SPSSAU数据分析 ...

  9. Flink-1.10.0中的readTextFile解读

    Flink-1.10.0中的readTextFile解读 最近在学习Flink,研究了一些东西,在准备自定义一个简单的监听文件的source作为练手的时候,遇到了一个问题.就是应该如何在自己的sour ...

  10. SSM项目_Eclipse卡进程 一直loading加载spring-xx.xsd/无法加载SpringXSD文件

    你遇到了套娃,请进https:////www.cnblogs.com/steamer/articles/12500645.html查看答案