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 ...
随机推荐
- flutter开发体验
flutter 介绍 flutter 是一种跨平台UI开发框架.这方面类似框架有: weex: Weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架. React Native: Re ...
- vue调起微信JSDK 扫一扫,相册等需要注意的事项
在VUE里面需要注意的第一个问题就是路由得设置成 2:第二个就是 跳转路由的时候 不要用this.$router.push 或者this.$router.replace 前者在ios 和安卓端都调不 ...
- Spring Boot系列(二):Spring Boot自动装配原理解析
一.Spring Boot整合第三方组件(Redis为例) 1.加依赖 <!--redis--> <dependency> <groupId>org.springf ...
- MIT 6.828 Lab 1/ Part 2
Exercise 03 - obj/boot/boot.asm 反汇编文件 截取asm部分文件并注释理解 # Set up the important data segment registers ( ...
- 编译原理LR(0)项目集规范族的构造详解
转载于https://blog.csdn.net/johan_joe_king/article/details/79051993#comments 学编译原理的时候,感觉什么LL(1).LR(0).S ...
- Fisher Coffee 测评(非严格控温控水)
Fisher Coffee 测评(非严格控温控水) 咖啡生产批次:2020-05-29 打分区间:1~5,0.5间隔 批次:2020.6.3 酸为主,苦为主. 无甘,有甘,微甘,较甜,甘甜. 不苦,有 ...
- Spring boot程序的部署及运行
将 spring boot 应用程序打包成 jar 包 我们使用 spring boot 的 maven 插件来构建管理整个应用程序,使用 mvn package 将应用程序打包成一个 jar 包 将 ...
- Vue基础(三)---- 组件化开发
基本结构: ◆1.组件化开发思想 ◆2.组件注册 ◆3.Vue调试工具用法 ◆4.组件间数据交互 ◆5.组件插槽 ◆6.基于组件的案例 ◆1.组件化开发思想 优点: 提高开发效率 方便重复使用 简 ...
- 在JAVASCRIPT中,为什么document.getElementById不可以再全局(函数外)使用?
今天在使用JavaScript使用document.ElementById("ID")的时候,发现var x = document.getElementById("chi ...
- Python 快速验证代理IP是否有效
有时候,我们需要用到代理IP,比如在爬虫的时候,但是得到了IP之后,可能不知道怎么验证这些IP是不是有效的,这时候我们可以使用Python携带该IP来模拟访问某一个网站,如果多次未成功访问,则说明这个 ...