表单标签的属性:
  用于向服务器传输数据
  表单能够包含input元素,比如文本字段,复选框,单选框,提交按钮等等
  表单还可以包含textarea(简介之类的),select(下拉),fieldset和label元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link>
</head>
<body>
<form action="https://www.sogou.com/web">
<!--action后面跟数据的发送终端地址-->
用户名<input type="text" name="query">
<!--name起的作用是将发送给服务端数据起键值对的作用,方便提取-->
<input type="submit" value="点击提交">
<!--submit起到提交作用,value起提示作用--> </form> </body>
</html>

  结果如图

当点击了提交之后,就弹到了

这是因为在搜狗搜索引擎里面提交的键值对分别是query和一个搜索字

如图

2、提交方式

表单主要有两种提交方式:post/get,默认是get
  get:提交的键值对,放在url后面,安全性较差,长度有限制
  post:提交的键值对不在地址栏,安全性相对较高,提交内容理论上无限制

3、input的其他标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link>
</head>
<body>
<form action="https://www.sogou.com/web" method="post" enctype="multipart/form-data">
<!--action后面跟数据的发送终端地址,发送文件时要声明multipart/form-data-->
<p>用户名:<input type="text" name="query"></p>
<p>密码:<input type="password" name="pwd"></p> <input type="submit" value="点击提交">
<!--submit起到提交作用,value起提示作用--> 相别
<p>男<input type="radio" name="sex" value="1"></p>
<!--radio是单选框,value起提示作用,传送到数据库的数据-->
<p>女<input type="radio" name="sex" value="2"></p> 兴趣
<p>篮球<input type="checkbox" name="hobby" value="1"></p>
<p>足球<input type="checkbox" name="hobby" value="2"></p>
<p>排球<input type="checkbox" name="hobby" value="3"></p>
<p>看书<input type="checkbox" name="hobby" value="4"></p>
<p>旅游<input type="checkbox" name="hobby" value="5"></p>
<!--这是复选--> 按钮
<p>
<input type="button" value="我是一个按钮">
</p> <input type="file" value="I am a file">
<!--file可以上传文件给服务端--> </form> </body>
</html>

  结果如图

4、

其他表单标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="language" multiple="multiple" size="3" >
<!--要放在option里面,multiple表示可以多选,size means the most you can choose-->
<optgroup label="语言学习1" >
<!--这是分组了-->
<option value="1">C</option>
<option value="2">java</option>
<option value="3">python</option>
</optgroup> <!--要放在option里面,multiple表示可以多选,size means the most you can choose-->
<optgroup label="语言学习2">
<option value="1">Chinese</option>
<option value="2">English</option>
<option value="3">French</option>
</optgroup> <!--要放在option里面,multiple表示可以多选,size means the most you can choose-->
<optgroup label="语言学习3">
<option value="1">mechine learning</option>
<option value="2">deep learning</option>
<option value="3">学个屁</option>
</optgroup>
</select>
<br>
备注<textarea name="text" ></textarea>
<!--添加文档-->
<br> <label for="www">姓名</label>
<input id="www" type="text">
<!--将文本和输入框链接起来,点击文本就可以进入输入框--> <fieldset>
<legend>登录吧</legend>
<!--加个框框-->
<input type="text">
</fieldset>

  结果如图

html之表单标签的更多相关文章

  1. SpringMVC 表单标签 & 处理静态资源

    使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...

  2. SpringMVC学习系列(11) 之 表单标签

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  3. (转载)SPRINGMVC表单标签简介

    SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍Spri ...

  4. 第五节:表单标签的用法——value绑定和修饰符

    1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如:  v-model ...

  5. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. SpringMVC 表单标签

    引入标签库 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" ...

  7. SpringMVC表单标签简介

    在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需 ...

  8. struts2:非表单标签

    非表单标签主要用于输出在Action中封装的信息,这在实际运用中是很常见的. 1. actionerror标签 <s:actionerror>标签主要用于输出错误信息到客户端,该标签将Ac ...

  9. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  10. Struts2的标签库(五)——表单标签

    Struts2的标签库(五) --表单标签 几个特殊的表单标签的使用: 1.checkboxlist标签 该标签用于创建多个复选框,用于同时生成多个<input type="check ...

随机推荐

  1. 【BZOJ2243】[SDOI2011] 染色(树链剖分)

    点此看题面 大致题意: 有一棵\(n\)个节点的无根树和\(m\)个操作,且每个节点有一个颜色.操作有两种:一种是将两点树上路径之间所有点染成颜色\(c\),另一种是询问两点树上路径之间颜色段的数量. ...

  2. 用ComboBox控件制作浏览器网址输入框

    实现效果: 知识运用: ComboBox控件的FindString public int FindString(string s) //查找数据项集合中指定数据项的索引 和Select方法 publi ...

  3. 2018.6.13 Java语言基础复习总结

    Java语言基础与面向对象编程实践 第一章 初识Java 1.1机器语言 机器语言是指一台计算机全部的指令集合.机器语言室友0和1组成的二进制数,是一串串由0和1组成的指令序列,可将这些指令序列交给计 ...

  4. 第八章 熟练dom的几个常用方法

    显示“缩略词语” <abbr> 标签指示简称或缩写,比如 <abbr title="World Wide Web Consortium">W3C</a ...

  5. python_35_进度条

    import sys for i in range(50): sys.stdout.write("+")#此命令不会像print语句执行一次,换行一次\ sys.stdout.fl ...

  6. SC || 记不住的正则

    +表示一个或多个 *表示零个或多个 ?表示零个或一个 {n} 表示n次 {n,m}表示[n, m]次  {,n}==[0,n] {m,}==[m,INT_MAX] \d 一个数字 \D 一个非数字 \ ...

  7. LuceneTest

    /** * Created by mhm on 2019/6/24. */@RunWith(SpringJUnit4ClassRunner.class)public class LuceneTest ...

  8. 【luogu P1983 车站分级】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1983 符合了NOIP命题的特点,知识点不难,思维量是有的. step1:把题读进去,理解.得到 非停靠点的等 ...

  9. CUDA:Supercomputing for the Masses (用于大量数据的超级计算)-第五节

    原文链接 第五节:了解和使用共享内存(2) Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Laboratory)的高级科研人员.他在多个国家级的实 ...

  10. java打包打包

    http://blog.sina.com.cn/s/blog_6b9dcc870101k8xq.html 上面说的最后一种方法,不太对. 下面这个可以 Try the fat-jar extensio ...