HTML -- 表单元素1
HTML 表单用于搜集不同类型的用户输入。
一、<form> 标签
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单用于向服务器传输数据。
（注释：form 元素是块级元素，其前后会产生折行。<input> 元素是最重要的表单元素。）
常见<input>元素的type属性值
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。 |
| password | 定义密码输入 |
| submit | 定义提交按钮（提交表单） |
| radio | 定义单选按钮输入（选择多个选择之一） |
| checkbox | 定义复选框 |
二、input元素的type属性值
<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）提交按钮
<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 属性的表单元素才能在提交表单时传递它们的值。
<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的更多相关文章
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 表单元素的submit()方法和onsubmit事件
1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱
网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...
- iScroll4下表单元素聚焦及键盘的异常问题
本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...
- 9月8日HTML表单元素（form、文本、按钮、选择）
表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...
随机推荐
- Cheese
题面: 现有一块大奶酪,它的高度为 h,它的长度和宽度我们可以认为是无限大的,奶酪 中间有许多 半径相同 的球形空洞.我们可以在这块奶酪中建立空间坐标系,在坐标系中, 奶酪的下表面为z=0,奶酪的上表 ...
- 用过 mongodb 吧， 这三个大坑踩过吗？
一:背景 1. 讲故事 前段时间有位朋友在微信群问,在向 mongodb 中插入的时间为啥取出来的时候少了 8 个小时,8 在时间处理上是一个非常敏感的数字,又吉利又是一个普适的话题,后来我想想初次使 ...
- redis 过期策略你知道多少，看完文章你会不自觉说喔哦
Redis 所有的数据结构都可以设置过期时间,时间一到,就会自动删除.你可以想象 Redis 内部有一个死神,时刻盯着所有设置了过期时间的 key,寿命一到就会立即收割. 你还可以进一步站在死神的角度 ...
- cinder api启动过程源码分析
1.启动cinder-api服务 当你通过cinder-api命令(如:/usr/bin/cinder-api --config-file /etc/cinder/cinder.conf)启动api服 ...
- 团队作业4：第七篇Scrum冲刺博客（歪瑞古德小队）
目录 一.Daily Scrum Meeting 1.1 会议照片 1.2 项目进展 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3.2 Code Review 记录 3.3 issue ...
- python - 常用数据清洗方法-重复项处理
在数据的处理过程中,一般都需要进行数据清洗工作,如数据集是否存在重复,是否存在缺失,数据是否具有完整性和一致性,数据中是否存在异常值等.发现诸如此类的问题都需要针对性地处理,下面我们一起学习常用的数据 ...
- Ubuntu 下查看CPU 信息命令
from: http://hi.baidu.com/hermitinhistory/blog/item/ce64d5fb6b23b71b6d22eb95.html 查看当前操作系统内核信息 uname ...
- MPI基础知识
一.MPI 知识点 1.MPI是什么 MPI是一个跨平台的通信协议,用于编写并行计算机,支持点对点和广播.MPI是一个信息传递应用程序接口,包括协议和语义说明,他们指明其如何在各种实现中发挥其特性.M ...
- springboot之对之前的补充
Spring Cloud 初级 一. Spring Boot 回顾 1 什么是 Spring Boot? Spring Boot 是在 Spring 的基础之上产生的(确切的说是在 Sprin ...
- 2020，8种必备Selenium编写自动化用例的技巧
在开始自动化时,您可能会遇到各种可能包含在自动化代码中的方法,技术,框架和工具.有时,与提供更好的灵活性或解决问题的更好方法相比,这种多功能性导致代码更加复杂.在编写自动化代码时,重要的是我们能够清楚 ...