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. dota2输入法无候选框?

    win10自带的微软拼音在dota2中不会显示候选框,或者说是选词框. 这种情况下只能选择其他输入法. 我选择的是搜狗输入法(此随笔添加时的最新版),在dota2中有选词框. 网上有些人说要改兼容性, ...

  2. 【Codeforces】CF Round #592 (Div. 2) - 题解

    Problem - A Tomorrow is a difficult day for Polycarp: he has to attend \(a\) lectures and \(b\) prac ...

  3. Kubernetes实战总结 - 自定义Prometheus

    一.概述 首先Prometheus整体监控结构略微复杂,一个个部署并不简单.另外监控Kubernetes就需要访问内部数据,必定需要进行认证.鉴权.准入控制, 那么这一整套下来将变得难上加难,而且还需 ...

  4. JVM的方法执行引擎-模板表

    Java的模板解析执行需要模板表与转发表的支持,而这2个表中的数据在HotSpot虚拟机启动时就会初始化.这一篇首先介绍模板表. 在启动虚拟机阶段会调用init_globals()方法初始化全局模块, ...

  5. GridBagConstraints详解

    名称 作用 默认值 常量 位置 gridx 行(x)的第一个单元格 0并且为非负数 RELATIVE(相对的) 紧跟前一个组件的后面 gridy 列(y)的第一个单元格 0并且为非负数 RELATIV ...

  6. 文华财经赢顺外盘期货行情数据API接口开放代码

    文华财经赢顺外盘期货行情数据API接口开放代码        怎么才能获取到外盘期货行情数据API接口呢?不少朋友就会考虑到文华财经行情API接口,本身文华财经就是一个软件提供商,提供行情API接口也 ...

  7. Python脚本实现在cmd执行相关命令

    通过Python脚本实现,在cmd命令执行文件的cp(复制).rm(删除).rename(重命名).move(文件移动).mkdir(创建目录) cmd执行命令格式:python xxx.py 用户名 ...

  8. Python1--简介及基础语法

    0. 简介 Python易于学习的编程语言,有很多现成的第三方库可以调用,不用重复造轮子,老话说:"人生苦短,我用 Python" 1. 安装Python Mac:brew ins ...

  9. 2019年达内云PS淘宝美工平面UI/UX/UE/UED影视后期交互设计师视频

    2019年达内云PS淘宝美工平面UI/UX/UE/UED影视后期交互设计师视频 百度网盘链接一 百度网盘链接二

  10. oracle之回顾二

    TCL 1.  事务(Transaction) 事务(Transaction)是一个操作序列.这些操作要么都做, 要么都不做, 是一个不可分割的工作单元, 是数据库环境中的最小工作单元. 1.1 事务 ...