4. HTML表单标签
表单是网页中最常见的元素,也是用户和我们交互的重要手段,在网站中的登录、注册、信息更新这些功能都是依赖表单实现的。在HTML中对于表单提供了一系列的标签,即输入框、下拉框、按钮、文本域,如下是一个最常见的表单结构内容:
![](/assets/blank.gif)
![](/assets/blank.gif)
1 <form method="" action="" enctype="multipart/form-data(提交表单中有文件设置)">
2 <!-- 输入框-文本框 -->
3 <input type="text" name="文本框名称"/>
4 <!-- 输入框-密码框 -->
5 <input type="password" name="密码框名称"/>
6 <!-- 输入框-单选按钮(通常是一对) -->
7 <input type="radio" name="单选按钮名称" value="单选按钮值"/>描述文本(页面显示内容)
8 <!-- 输入框-复选框(通常是 name属性相同的一组) -->
9 <input type="checkbox" name="复选框名称" value="复选框值"/>描述文本(页面显示内容)
10 <!-- 输入框-文件域(注意此时必须设置表单的 enctype 属性) -->
11 <input type="file" name="文本框名称"/>
12 <!-- 下拉列表 -->
13 <select name="下列框名称">
14 <option value="下拉列表选项值(通常是一组)">下拉列表选项(页面显示内容) </option>
15 </select>
16 <!-- 按钮-普通 -->
17 <input type="button" name="按钮名称" value="按钮页面显示文字">
18 <!-- 按钮-提交 -->
19 <input type="submit" name="按钮名称" value="按钮页面显示文字">
20 <!-- 按钮-重置 -->
21 <input type="reset" name="按钮名" value="按钮页面显示文字">
22 </form>
View Code
表单结构
1 <form action="" method="POST" enctype="multipart/form-data">
2 用户名:<input type="text" name="username"/>
3
4 <input type="submit" name="提交按钮"/>
5 </form>
如上是一个最简单的表单结果,在表单结构中需要我们掌握的内容除了表单相关的标签外,就是表单的属性。action 属性,指向服务器处理表单的程序地址,而method属性指定浏览器处理表单的方式,常用的方法包括GET、POST,如下是我们总结的一些关于这两种方式的区别:
GET,这种方法在表单提交的时候比较快,但是表单中的数据会显示在浏览器的地址栏中,所以这种方式不太安全。
POST,这种方法在提交表单的时候会对表单内容进行封装,不会显示在地址栏中,所以这种方式比较安全,不过在速度上不如GET方式。
输入框
<p>用户名:<input type="text" name="username"/>
</p>
<p>密 码:<input type="password" name="password"/>
</p>
<p>性 别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
</p>
<p>爱 好:<input type="checkbox" name="hobbies"/>读书<input type="checkbox" name="hobbies"/>打游戏<input type="checkbox" name="hobbies"/>旅游<input type="checkbox" name="hobbies"/>爬山
</p>
<p>上传文件: <input type="file" name="uploadfile"/>
</p>
<p>隐藏域: <input type="hidden" name="userid" value="0000011101010"/>
</p>
如上就是表单的中输入框内容,输入框依赖的是<input>标签,不同的输入框实现是通过它的type属性实现的,关于type属性的值包括可用的选项包括 text(普通文本输入)、password(密码框) 、checkbox(复选框)、radio(单选按钮)、submit(提交按钮)、reset(重置按钮)、file(文件域)、hidden(隐藏域),默认为 text。
按钮
<p><button type="button">普通按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button>
</p>
<p><input type="button" value="普通按钮"/><input type="submit" value="提交按钮"/><input type="reset" value="重置按钮"/>
</p>
如上就是表单中实现按钮的方式,可以通过<button>标签,也可以通过<input>标签,不论使用哪种方式,我们都会发现这些按钮都可以分为三类,即普通按钮、提交按钮、重置按钮,指定按钮形式都是依赖type属性指定的。在这里需要注意的是<button>按钮指定描述文本是在标签中的描述文本,而<input>标签指定按钮的描述文本是通过value属性。
下拉框
<p>省:<select name="province"><option selected>--- 请选择 ---</option><option value="0001">河北省</option><option value="0002">山西省</option><option value="0003">陕西省</option></select>
</p>
下拉框可以方便用户输入,具体的内容如上所示。
文本域
<textarea name="content" cols="80" rows="10">测试
</textarea>
文本域可以让我们输入大段的文字,需要注意的是文本域和输入框不同的地方是,文本域的默认值是标签中的文本,输入框是通过value属性指定的。
更多专业前端知识,请上 【猿2048】www.mk2048.com
4. HTML表单标签相关推荐
- 表单标签form、label、input、textarea、select
表单的介绍 表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 . 表单相关标签的使用 <form>标签 表示表单标签,定义整体的表单区域 <la ...
- html表单标签怎么使用,HTML的表单标签使用
使用 表单标签,与用户交互 语法: 其中传输方式有俩种,分别是get或者post.其中get是用于从服务器得到数据,而post是向服务器传输数据.两者有较大的区别. 在安全性来讲post更优于get. ...
- 5.数据绑定和表单标签库
1.有了数据绑定,类型总是为了String的HTTP请求参数,可用于填充不同的类型的对象属性 2.表单标签库 为了使用这些标签,必须在jsp页面开头处声明这个taglib指令 <%@taglib ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- springmvc十九:springmvc表单标签
1. Spring提供的轻量级标签库 2.可在JSP页面中渲染HTML元素的标签 3 用法 1)必须在JSP页面的开头处声明taglib指令 <%@ taglib prefix="fm ...
- SpringMVC学习系列(11) 之 表单标签
2019独角兽企业重金招聘Python工程师标准>>> 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebMode ...
- SpringMVC:学习笔记(5)——数据绑定及表单标签
SpringMVC--数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- Bootstrap4+MySQL前后端综合实训-Day08-PM【ajax获取表单标签内容、根据“栏目信息”添加“新闻信息”、新闻管理系统-项目展示】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 ajax获取表单标签内容 ajax根据数据库加载select下来列 ...
- Spring MVC之表单标签
为什么80%的码农都做不了架构师?>>> 序言 Spring自2.0开始,就开始全面支持表单标签. 使用表单标签的优点有: 简单 支持Model自动绑定 一.表单标签开发步骤 ...
最新文章
- 重构是提高可测试性的主要手段 《设计模式》《代码重构》《从重构到模式》 《反模式》 重构时机 编写测试时候 修改BUG时候
- 我们也铺好了新赛道啦!!!
- Linux学习笔记:touch新建文件、修改访问、改动时间
- uestc 1073 秋实大哥与线段树 Label:线段树
- boost::integer::mod_inverse用法的测试程序
- 从零开始玩转JMX(二)——Condition
- java的scanner使用步骤
- 437.路径总和III (力扣leetcode) 博主可答疑该问题
- cad修改快捷键_怎么编辑CAD快捷键?
- 程序员脱离苦海就靠这些绝招了了了。。。
- 【网页模板代码】0代码也可以制作网站?使用网页模板!
- ios:苹果手机直接安装ipa文件
- vim实用技巧总结 [Linux]
- 实验2 双绞线的制作
- 名帖80 苏轼 楷书《南轩梦语》
- C++容器 vector(附代码实例讲解)
- mysql 在线热备_MySQL 热备份实现
- 从事电商Java后端一年的思考与总结
- python中PyGame的下载与安装
- 客快物流大数据项目学习框架
热门文章
- 学术诚信的重要性_申论作文开头之诚信
- 【模式识别】特征评价和可分性判据实验报告及MATLAB仿真
- 【Error】IDEA报错:org.jetbrains.jps.builders.java.dependencyView.TypeRepr$PrimitiveType cannot be cast t
- excel表格不够怎么添加_这个Excel表格,怎么做的这么漂亮
- pyspider爬虫框架
- codeforces 701 E. Connecting Universities(树+ 边的贡献)
- 2017/3/8 函数指针/事件/委托....
- HDU2795 Billboard
- 七个重要习惯——读《高效能人士的七个习惯》整理
- C#正则表达式编程(二):Regex类用法