HTML表单标签

表单标签

<form action="" method=""></form>

form 标签为html创建一个表单

action属性表示表单要提交到的页面

method属性表示表单数据提交时的传输方式  get|post

get和post的区别

1、get明文传输,不安全,post密文传输,安全

2、get最多可传输255个字符,post对传输字符去限制

文本框标签<input />

1.普通文本框

<input type="text" name="" />

2.密码框

<input type="password" name="" />

3.单选框

<input type="radio" name="" value="" />  注意:使用radio时name的值需要保持一致,否则不会显示单选按钮

4.复选框

<input type="checkbox" name="" value="" />

5.图片域

<input type="image" src="" width="" height="" />

注意:图片域自带提交功能,在传值时会把鼠标点击图片的x轴和y轴的坐标传给下一个页面

6.文件域

<input type="file" name="" />   文件上传功能

7.普通按钮

<input type="button" value="" />

8.重置按钮

<input type="reset" value="" />

9.提交按钮

<input type="submit" value="" />

input属性readonly="readonly" 设置只读

disabled="disabled" 设置禁用

checked="checked" 在单选按钮和复选框中设置默认被选中

10.下拉菜单

<select name="">

<option value=""></option>

<option value=""></option>

</select>

在<select>标签中selected="selected"设置被选中

11.多行文本框

<textarea name=""></textarea>

注意:在H4中以上必须要放在form标签中才可被传递

以下是HTML5中提供的属性

在HTML5中表单标签可以脱离form标签

在form标签中写一个ID属性,在其他标签中写属性form="form标签中的ID值"

在H5中form新增属性

autocomplete  是否开启自动完成功能  on表示开启    off表示关闭

novalidate="novalidate"  当属性出现时,表示表单不进行验证

新增表单属性

带邮箱验证的文本框

<input type="email" name="" />

输出一个颜色选择器

<input type="color" name="" />

带数字验证的输入框

<input type="number" max=35 min=15 />

说明文本框内只能输入15到35之间的数字

带有日期的输入框

<input type="date" name="" />

带有时间的输入框

<input type="time" name="" />

带有星期的输入框

<input type="week" name="" />

带有月份的输入框

<input type="month" name="" />

带有可滑动滚动条的input

<input type="range" name="" max="20" min="5" step="5" value="10">

max  最大值   min  最小值   step  步长   value  默认值

搜索框

<input type="search" name="ss" results="c"/>

results="c"表示框的最前端有一个搜索图标

带有电话号码段的输入框

<input type="tel" name="" />

验证输入内容为URL地址的输入框

<input type="url" name="" />

datalist控件

<input type="text" list="car" />
<datalist id="car">
    <option value="宝马" />
    <option value="宝具" />
</datalist>

output输出框

<form action="" method="" oninput="res.value=r1.value*r2.value">
   <input type="number" name="r1" />
   <input type="number" name="r2" />
   <output name="res"></output>
</form>

注意:在HTML5中input新增属性placeholde 意思是提示语,当输入内容是清空
                            required设置表单内容不能为空
                            autofocus自动获得焦点
                            patten 正则表达式,输入的内容必须匹配到指定正则

web应用标签

<progress></progress>

<script>
<progress max="100" min="0" value="0" id="dd"></progress>
var s=document.getElementById("dd")

setInterval(function(){
		dd.value+=2
		if(dd.value==100){
			alert("安装完成")
						}
	},500)

</script>

显示状态标签<meter></meter>

max  最大值     min   最小值

low 被界定为低的值   high  被界定为高的值

optimum

定义什么样的度量值是最佳的值。

如果该值高于 "high" 属性,则意味着值越高越好。

如果该值低于 "low" 属性的值,则意味着值越低越好。

value  要度量的值

HTML的全局属性

contenteditable   规定元素内容是否可编辑  true表示可编辑    false表示不可编辑

contextmenu   规定元素的上下文菜单。上下文菜单在用户点击元素时显示

draggable  规定元素是否可拖动

dropzone    规定在拖动被拖动数据时是否进行复制、移动或链接。

hidden   规定元素仍未或不再相关。

spellcheck  规定是否对元素进行拼写和语法检查

translate  规定是否应该翻译元素内容。

tabindex    按tab键光标跳转顺序

时间: 2024-11-06 03:46:19

HTML表单标签的相关文章

html(五) -- 表单标签

表单标签: 表单标签的作用是用于提交数据给服务器的. 表单标签的根标签是<form>标签 常用的属性:    action: 该属性是用于指定提交数据的地址.    method: 指定表单的提交方式.            get : 默认使用的提交方式.  提交的数据会显示在地址栏上.            post :  提交的数据不会显示在地址栏上.注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值. 代码示例: 1 <!DOCTYPE html&g

Struts2中UI标签之非表单标签

1.非表单标签主要用于在页面生成一些非表单的可视化元素,例如Tab页面,输出HTML页面的树形结构等.当然,非表单标签也包含在页面显示Action里封装的信息,非表单标签主要有如下几个: a:生成一个超级连接(link). actionerror:如果Action实例的getActionError()方法返回不为null,则该标签负责输出该方法返回的系列错误. actionmessage:如果Action实例的getActionMessage()方法返回不为null,则该标签负责输出该方法返回的

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

SpringMVC表单标签简介

转自:SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需要先在JSP中声明使用的标签,具体做法是在JSP文件的顶部加入以下指令: <%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

html的表单标签

作用:用来采集用户输入的数据,然后发送给后台处理 表单标签: <form>       表示一张表单 常用属性: action: 表示提交的地址(提交给谁处理?) method:  表示提交的方式 get 1)把用户提交的参数暴露在浏览器的地址栏 2)敏感数据不适合用get提交 3)get方式提交的数据长度不超过1kb.例如编号数据 post 1)不会把用户提交的参数暴露在浏览器的地址栏 2)敏感数据适合post提交 3) post方式提交的数据长度没有限制(文件上传必须使用post方式) &

struts2学习笔记之十三(表单标签和非表单标签)

表单标签 这些UI标签都可以指定cssClass,cssStyle来指定CSS样式,而且可以指定大量的onXxx属性,用于绑定JS函数 form : 表单 head :引入一些辅助的css样式单和js脚本 hidden :隐藏域 label :生成一个标签 password : 生成一个密码框 select :列表框 checkbox : 只是生成一个复选框 radio :不是生成一个单选框 file :生成一个文件上传域 textfield :单行文本域 textarea :多行文本域 sub

表单标签

表单标签:用于提交数据给服务器. 表单标签的跟标签是<form>标签. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

&lt;form&gt;-&lt;input&gt;表单标签

概念:用于描述需要用户输入的页面内容 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-

第七节 认识SpringMVC中的表单标签

所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当中有别人写好的标签] 表单标签:使用规则 模拟开发环境: 1.更新操作 A.通过主键进行查询 B.JSP显示 C.提交表单 @RequestMapping(value="/update/{user_id}",method=RequestMethod.GET) public ModelAnd

一、常用表单标签如下:

(1)<input>中的“type”属性: 复选框-checkbox:单选按钮-radio;按钮-button:提交-submit; (2)文本域 行-cols:列-rows: <form> 表单 <input> 输入域 <textarea> 文本域 <label> 控制标签 <fieldset> 定义域 <legend> 域的标题 <select> 选择列表 <optgroup> 选项组 <