转发-html 表单

此文章仅为转发,非原创,原文http://www.cnblogs.com/zhuanggege/p/5738467.html

请支持原创

<form>

form属性:

name 规定表单的名称

action 规定当提交表单时向何处发送表单数据

target 规定在何处打开action属性的url

method 规定如何发送表单数据,get:在url地址上面传送参数到服务器,post:在后台传送参数到服务器

enctype 规定在向服务器发送表单数据之前如何对其进行编码,只有method="post"时才使用enctype属性

application/x-www-form-urlencoded:默认,在发送前对所有字符进行编码(将空格转换为"+"符号,特殊字符转换为ASCII HEX值)

multipart/form-data:不对字符编码,当使用有文件上传控件的表单时,该值是必需的

text/plain:将空格转换为"+"符号,但不编码特殊字符

表单属性:

type 规定元素的类型

name 规定元素的名称

value 指定元素的值

size 规定以字符数计的元素的可见宽度

maxlength 规定元素中允许的最大字符数

disabled 规定应该禁用的元素,被禁用的input元素既不可用,也不可点击,直到满足某些条件为止

readonly 规定输入字段为只读,不能修改,不过仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本

表单的type类型

text

定义单行输入字段,用户可以在其中输入文本,默认是20个字符

用户名:<input type="text" name="username"/>

password

定义密码字段,字段中的字符会被遮蔽

密 码:<input type="password" name="password"/>

radio

定义单选按钮

<input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female"/>女

单选按钮的name值必须相同

value值是提交给后台的数据,代表你的选择

checked规定在页面加载时应该被预先选定

checkbox

定义复选框

<input type="checkbox" name="love" value="music" checked/>音乐
<input type="checkbox" name="love" value="movie"/>电影
<input type="checkbox" name="love" value="game"/>游戏

button

定义可点击的按钮(大多与javascript使用来启动脚本)

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

submit

定义提交按钮,提交按钮向服务器发送数据

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

reset

定义重置按钮,重置按钮会将所有表单字段重置为初始值

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

image

定义图像作为提交按钮

<input type="image" src="url" alt=" "/>

file

定义输入字段和"浏览..."按钮,供文件上传

<input type="file" multiple/>

用这项功能时,enctype属性指定为"multipart/form-data"

multiple控制是否上传多个文件

hidden

定义隐藏输入字段,隐藏字段常常储存默认值,或者由javascript改变它们的值

<input type="hidden" name="country" value="china"/>

number

定义带有spinner控件的数字字段

<input type="number" min="1" max="10"/>

max:规定允许的最大值

min:规定允许的最小值

step:规定合法数字间隔

value:规定默认值

range

定义带有slider控件的数字字段,range类型显示为滑块,可以设置可接受数字的限制

<input type="range" min="0" max="100" value="50" step="10"/>

max:规定允许的最大值

min:规定允许的最小值

step:规定合法数字间隔

value:规定默认值

search

定义用于搜索的文本字段

color

定义拾色器

tel

定义用于电话号码的文本字段

email

定义用于e-mail地址的文本字段,当提交表单时,会自动地对email字段的值进行验证

url

定义用于url的文本字段,当提交表单时,会自动地对url字段的值进行验证

date,datetime,datetime-local,month,week,time

date:定义date控件(包括年、月、日,不包括时间)

datetime:定义date和time控件(包括年、月、日、时、分、秒、几分之一秒,基于UTC时区)

datetime-local:定义date和time控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)

month:定义month和year控件(不带时区)

week:定义week和year控件(不带时区)

time:定义用于输入时间的控件(不带时区)

html5的新的表单属性

novalidate

规定当提交表单时不对其进行验证

novalidate属性适用于<form>,以及下面的<input>类型:text,search,url,telephone,email,password,datepickers,range,color

<form novalidate>
    E-mail: <input type="email" />
    <input type="submit" />
</form>

autocomplete

规定表单是否应该启用自动完成功能

自动完成允许浏览器预测对字段的输入,当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项,一定要设置name或者id

autocomplete属性适用于<form>,以及下面的<input>类型:text,search,url,telephone,email,password,datepickers,range,color

<input type="search" name="keywords" autocomplete="on/off" />

autofocus

规定当页面加载时按钮应当自动地获得焦点,适用于所有<input>标签的类型

form

规定输入域所属的一个或多个表单,适用于所有<input>标签的类型,form属性必须引用所属表单的id

<form id="zhuang">
    First name:<input type="text" /> <input type="submit" />
</form>
    Last name:<input type="text" form="zhuang" />

form overrides

表单重写属性,允许您重写form元素的某些属性设定:

formaction:重写表单的action属性

formenctype:重写表单的enctype属性

formmethod:重写表单的method属性

formnovalidate:重写表单的novalidate属性

formtarget:重写表单的target属性

表单重写属性适用于以下类型的<input>标签:submit,image

<form>
    e-mail: <input type="email" /> <br />
    <input type="submit" value="确定1" /> <br />
    <input type="submit" formnovalidate="true" value="确定2" />
</form>

height,width

规定于input标签的image类型的图像的高度和宽度

list

规定输入域的datalist,datalist是输入域的选项列表

list属性适用于以下类型的<input>标签:text,search,url,telephone,email,datepickers,number,range,color

Webpage: <input type="url" list="zhuang" />
<datalist id="zhuang">
    <option label="W3Schools" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min,max,step

用于为包含数字或日期的input类型规定约束

max属性规定输入域所允许的最大值

min属性规定输入域所允许的最小值

step属性为输入域规定合法的数字间隔(如果step="3",则合法的数是-3,0,3,6等)

min,max,step属性适用于以下类型的<input>标签:datepickers,number,range

<input type="number" min="0" max="10" step="3" />

multiple

规定输入域中可选择多个值

multiple属性适用于以下类型的<input>标签:email,file

<input type="file" multiple />

pattern

规定用于验证input域的模式

[ ]限定类型范围:[0-9],[a-z],[A-Z],[0-9A-z]

{ }限定个数范围:{1,10},{1,}

pattern属性适用于以下类型的<input>标签:text,search,url,telephone,email,password

<form>
    国家代码:<input type="text" pattern="[A-z]{3}" title="三个字母的国家代码" />
    <input type="submit" />
</form>

placeholder

提供一种提示,描述输入域所期待的值,提示会在输入域为空时显示出现,会在输入域获得焦点时消失

placeholder属性适用于以下类型的<input>标签:text,search,url,telephone,email,password

<input type="search" placeholder="Search W3School" />

required

规定必须在提交之前填写输入域(不能为空)

required属性适用于以下类型的<input>标签:text,search,url,telephone,email,password,datepickers,number,checkbox,radio,file

<form>
    Name: <input type="text" required />
    <input type="submit" />
</form>

<textarea>

表单元素:多行文本域

可以通过cols和rows属性来规定textarea的尺寸,不过更好的办法是使用css的height和width属性

<textarea rows="5" cols="50" style="resize:none;"> </textarea>

cols 规定文本域内每一行可以容纳多少个字

rows 规定文本域一共可以显示多少行

resize 规定文本域的大小是否允许修改:

none:不允许

horizontal:允许改变宽度

vertical:允许改变高度

both:允许改变宽高

<select>

表单元素:下拉框

multiple 规定可选择多个选项

size 规定下拉列表中可见选项的数目

selected 规定在页面加载时预先选定该选项

<select>
    <option>北京</option>
    <option selected>广州</option>
    <option>上海</option>
</select>

<optgroup>

表单元素:下拉框分组

用于组合选项,当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易

label 为选项组规定描述

<select>
    <optgroup label="广东">
        <option selected>广州</option>
        <option>深圳</option>
    </optgroup>
    <optgroup label="其他">
        <option>北京</option>
        <option>香港</option>
    </optgroup>
</select>

<keygen>

规定用于表单的密钥对生成器字段,当提交表单时,私钥存储在本地,公钥发送到服务器

<form>
    Username: <input type="text">
    Encryption: <keygen />
    <input type="submit">
</form>

<output>

作为计算结果输出显示(比如执行脚本的输出)

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"> </output>
</form>

<label>

label元素不会向用户呈现任何特殊效果,不过它为鼠标用户改进了可用性,如果你在label元素内点击文本,就会触发此控件,就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上

<label for="username">用户名:</label>
<input type="text" id="username"/>

<fieldset>

可将表单内的相关元素分组

legend标签为fieldset元素定义标题

<form>
    <fieldset>
        <legend>健康信息</legend>
        身高:<input type="text" />
        体重:<input type="text" />
    </fieldset>
</form>    

时间: 2024-10-27 12:17:21

转发-html 表单的相关文章

Servlet--超链接,表单提交,重定向,转发4种情况的路径

实际编码中我们常常写路径,写路径既能够写相对路径,也能够写绝对路径.我2年曾经我就养成了习惯.仅仅要是写路径我从来都是写绝对路径,由于万一将来我们的项目的文件夹发生变化.原来要是写相对路径的话就会有路径依赖关系.改的地方太多了.并且相对路径在某些情况下还有点特殊,有的是相对于原来的请求的文件夹,有的是相对于整个web应用,所以我强烈建议大家以后写路径统一用绝对路径(以"/"开头)来写,"/"表示网站的根路径. 写路径的情况无非以下4种情况,这里做一个整理. 1,超链

表单重复提交问题

一.常见的重复提交问题  a>点击提交按钮两次.  b>点击刷新按钮.  c>使用浏览器后退按钮重复之前的操作,导致重复提交表单.  d>使用浏览器历史记录重复提交表单.  e>浏览器重复的HTTP请求. 二.防止表单重复提交原理 提交表单的时候提交一份随机的字符串或随机数字等等,再把这个随机的数据存到request里面,然后把表单数据提交,在后台验证的时候判断提交的这两份额外的数据是否一致,如果一致,则把其中一份删除掉,这么做的目的是防止再次提交,继续进行操作,如果不一致,

SpringMVC之表单校验

SpringMVC已经实现了对Java校验API(JSR-303)的支持,通过使用该API可以实现对数据的校验.要使用SpringMVC的Java校验API并不需要任何配置,只要引入其实现即可.本文使用hibernate-validator 5.2.4. 首先使用Maven使用hibernate-validator 5.2.4.接着就可以直接使用了.本文使用场景为注册,注册时需要提供用户名.密码以及出生日期,用户名以及密码的长度为5到20,出生日期必须为过去时间. 首先使用Java校验API提供

JavaWeb 之 重复提交表单和验证码相关的问题!

下面我们首先来说一下表单的重复提交问题,我们知道在真实的网络环境中可能受网速带宽的原因会造成页面中表单在提交的过程中出现网络的延迟等问题,从而造成多次提交的问题!下面我们就具体来分析一下造成表单提交的一些常见问题. 下面我们就来列举一下重复提交的情况: ① .当表单提交数据到一个 Servlet 中,然后 Servlet再通过请求转发到成功页面,但是此时的地址栏中的地址是到 Servlet映射中的地址,并没有跳转到成功页面相关的JSP页面中,此时刷新页面会造成再一次提交表单. ② .当在表单页面

struts2 文件的上传下载 表单的重复提交 自定义拦截器

文件上传中表单的准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置为 post 需添加 <input type=“file”> 字段. Struts 对文件上传的支持 在 Struts 应用程序里, FileUpload 拦截器和 Jakarta Commons FileUpload 组件可以完成文件的上传. 步骤:1. 在 Jsp 页面的文件上传表单里使用

[原创]java WEB学习笔记34:Session 案例 之 解决表单重复提交

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

表单重复提交--笔记

同一个表单中的内容多次提交到服务器中. 第一种情况:    提交完表单以后,不做其他操作,直接刷新页面,表单会提交多次.    - 这种情况产生的根本原因是,Servlet处理完请求以后,直接转发到目标页面.    - 这样整一个业务,只发送了一次请求,那么当你在浏览器中点击刷新按钮或者狂按f5会一直都会刷新之前的请求 解决方案:     使用重定向跳转到目标页面 第二种情况:    在提交表单时,如果网速较差,可能会导致点击提交按钮多次,这种情况也会导致表单重复提交.    - 产生的原因:是

from表单文件上传后页面跳转解决办法

from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/></head><body onload='JavaScript:history.

Servlet/JSP-07 Session应用:避免表单重复提交

Session应用:避免表单重复提交 一. 表单的重复提交 1. 重复提交的情况 ①在表单提交到一个 Servlet,而 Servlet 又通过请求转发的方式响应了一个 JSP 或者 HTML 页面,此时浏览器地址栏还保留着 Servlet 路径,在此响应页面点击”刷新“按钮 ② 在响应页面尚未到达时,重复点击表单的”提交“按钮 ③ 点击”返回“按钮或者浏览器的回退按钮,再点击”提交“按钮 2.如何避免表单重复提交? 原理:在表单中做一个标记,当表单提交到Servlet时,检查标记是否存在且是否