精华内容
下载资源
问答
  • HTML网页表单制作详细讲解
    千次阅读
    2021-06-12 01:47:16

    表单是一个网站和访问者开展互动的窗口,我们现在就给大家介绍一下表单的一些基本知识和表单美化方法。

    初识表单

    表单可以用来在网页中发送数据,特别是经常被用在联系表单-用户输入信息然后发送到Email中。表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML,你能够自助地找到一些简单的教程,开发一个服务器端的程序使一个发送到Email的表单工作。

    表单元素

    实际用在HTML中的标签有form、 input、 textarea、 select和option。表单标签form定义的表单里头,必须有行为属性action,它告诉表单当提交的时候将内容发往何处。

    可选的方法属性method告诉表单数据将怎样发送,有get(默认的)和post两个值。常用到的是设置post值,它可以隐藏信息(get的信息会暴露在URL中)。网页教学网

    所以一个表单元素看起来是这样子的:

    以下为引用的内容:

    input标签在表单制作中起到的作用很重要。有10种形式,概括如下:

    是标准的文本框。它可以有一个值属性value,用来设置文本框里的默认文本。

    像文本框一样,但是会以星号代替用户所输入的实际字符。

    是复选框,用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked,像这样的格式. 网页教学网

    与复选框相似,但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked,使用方法跟复选框一样。 网页教学网

    是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一样。 网页教学网

    是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本(下面的button和reset类型也可以这样,稍后介绍),如下: .

    以图像代替按钮文本,src属性是必须的,像img标签一样。

    是一个如果没有其他代码的话什么都不做的按钮。

    是一个点击后会重置表单内容的按钮。

    不会显示任何东西,它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。

    注意输入标签input也是用“/>”自关闭的。

    多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols,用法像这样:网页教学网

    Webjx.Com welcome

    选定标签select与选项标签option一起可以制作一个下拉选框。是这样工作的:

    以下为引用的内容:

    Option 1

    Option 2

    Option 3

    当表单被提交时,被选中选项的值将被发送。网页教学网

    与复选框和单选按钮的预选属性checked一样,选项标签option也有一个预选属性selected,它可以用在这样的格式中:

    Rodent

    上述的标签中在网页中看起来都不错,但是,如果你有一个程序来处理这个表单,这些标签都不起作用。这是因为,表单字段需要名称。所以所有的字段中都需要增加名称属性name,比如 。 网页教学

    一个表单看起来应该像下面这样(注意:这个表单不会工作,除非有一个用来提交数据的“reg.asp”的文件,它位于表单标签form的行为属性action中。)

    以下为引用的内容:

    Name:

    Comments:

    Your comments

    Are you:

    网页教学

    Male

    Female

    An hermaphrodite

    Asexual

    以上就是表单的一些基本知识和表单的工作原理了,希望大家对表单有个好的认识。

    更多相关内容
  • 前后端交互的两种方式

    千次阅读 多人点赞 2019-12-09 20:07:47
    是一常见的与服务端数据交互的一种方式 //1. action:指定表单的提交地址 //2. method:指定表单的提交方式,get/post,默认get //3. input的数据想要提交到后台,必须指定name属性,后台通过name属性获取值 //4. ...

    方式一:表单提交

    表单(form):表单用于收集用户输入信息,并将数据提交给服务器。是一种常见的与服务端数据交互的一种方式

    //1. action:指定表单的提交地址
    //2. method:指定表单的提交方式,get/post,默认get
    //3. input的数据想要提交到后台,必须指定name属性,后台通过name属性获取值
    //4. 想要提交表单,不能使用input:button 必须使用input:submit
    

    php获取表单数据

     //$_GET是PHP系统提供的一个超全局变量,是一个数组,里面存放了表单通过get方式提交的数据。
     //$_POST是PHP系统提供的一个超全局变量,是一个数组,里面存放了表单通过post方式提交的数据。
    

    get与post的区别

    //1. get方式
    	//1.1 数据会拼接在url地址的后面?username=hcc&password=123456
    	//1.2 地址栏有长度限制,因此get方式提交数据大小不会超过4k
    //2. post方式
    	//2.1 数据不会在url中显示,相比get方式,post更安全
    	//2.2 提交的数据没有大小限制
    
    //根据HTTP规范,GET用于信息获取,POST表示可能修改变服务器上的资源的请求
    

    http协议

    协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则
    HTTP协议,即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则,HTTP协议分为请求响应 两个部分组成。

    请求与请求报文

    get请求的请求报文详解

    //--------------------------请求行--------------------------------
    // GET  请求方式
    // /day02/01.php?username=hucc&password=123456    请求路径+参数(注意点)
    // HTTP/1.1 HTTP的版本号
    GET /day02/01.php?username=hucc&password=123456 HTTP/1.1
    
    //--------------------------请求头--------------------------------
    // Host:主机地址
    Host: www.study.com
    // HTTP1.1版本默认开启,建立过连接后,TCP连接不会断开,下次连接可以继续使用(底层,不用管)
    Connection: keep-alive
    //chrome浏览器自己增加的,不用管
    Upgrade-Insecure-Requests: 1
    //浏览器的代理字符串(版本信息)
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
    //浏览器端可以接受的类型。
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,`*/*`;q=0.8
    //从哪个页面发出的请求
    Referer: http://www.study.com/day02/01-login.html
    //检查浏览器支持的压缩方式
    Accept-Encoding: gzip, deflate, sdch
    //浏览器支持的语言,优先中文。
    Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
    
    //----------------------------请求体-------------------------------------
    //get请求没有请求体,但是参数会拼接到请求行中
    

    POST请求的请求报文

    //-----------------------请求行---------------------------------------------
    POST /day02/01.php HTTP/1.1
    
    //-----------------------请求头--------------------------------------------
    Host: www.study.com
    Connection: keep-alive
    //传递的参数的长度。
    Content-Length: 29
    Cache-Control: max-age=0
    Origin: http://www.study.com
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
    //内容类型:表单数据,如果是post请求,必须指定这个属性。
    Content-Type: application/x-www-form-urlencoded
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,`*/*`;q=0.8
    Referer: http://www.study.com/day02/01-login.html
    Accept-Encoding: gzip, deflate
    Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
    
    //------------------------请求体------------------------------------------
    username=hucc&password=123456
    

    GET请求与POST请求的对比

    • GET请求没有请求体,因为GET请求的参数拼接到地址栏中了
    • POST请求有请求体,就是传递的参数
    • POST请求需要指定content-type属性。

    响应与响应报文

    //---------------------状态行(响应行)-------------------------------
    //HTTP/1.1  HTTP版本
    //200 响应的状态
    	//200表示成功
    	//304表示读缓存
    	//404表示找不到资源
    	//500表示服务端错误
    HTTP/1.1 200 OK
    
    //----------------------响应头-----------------------------------------------
    Date: Thu, 22 Jun 2017 16:51:22 GMT
    Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45
    X-Powered-By: PHP/5.4.45
    Content-Length: 18
    Keep-Alive: timeout=5, max=100
    Connection: Keep-Alive
    //内容类型,告诉浏览器该如何解析响应结果
    Content-Type: text/html;charset=utf-8
    //-----------------------响应体------------------------------------------------
    用户登录成功
    

    通常来说,我们不会用抓包工具来查看请求和响应,太麻烦了,可以直接使用谷歌浏览器来查看请求报文和响应报文。

    谷歌浏览器会对报文进行一定的格式化,看起来虽然不是原生的报文,但是使用起来更加的方便简洁。

    方式二:Ajax

    即 Asynchronous [e’sɪŋkrənəs] Javascript And XML, AJAX 不是一门的新的语言,而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

    同步与异步

    同步和异步概念:

    同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

    异步: 不受当前任务的影响,两件事情同时进行,做一件事情时,不影响另一件事情的进行。

    编程中:异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

    ajax技术的应用:

    1. 验证你的用户名是否已经存在(一边输入,一边获取你的信息,和后台比对)。
    2. 百度搜索提示,及相关内容展示(一边输入,一边找出了你可能要的内容)。

    XMLHttpRequest可以以异步方式的处理程序。

    XMLHttpRequest

    浏览器内建对象,用于与服务器通信(交换数据) , 由此我们便可实现对网页的部分更新,而不是刷新整个页面。这个请求是异步,即在往服务器发送请求时,并不会阻碍程序的运行,浏览器会继续渲染后续的结构。

    发送get请求

    XMLHttpRequest以异步的方式发送HTTP请求,因此在发送请求时,一样需要遵循HTTP协议。

    //使用XMLHttpRequest发送get请求的步骤
    //1. 创建一个XMLHttpRequest对象
    var xhr = new XMLHttpRequest;//构造函数没有参数的情况,括号可以省略
    //2. 设置请求行
    //第一个参数:请求方式  get/post
    //第二个参数:请求的地址 需要在url后面拼上参数列表
    xhr.open("get", "08.php?name=hucc");
    //3. 设置请求头
    //浏览器会给我们默认添加基本的请求头,get请求时无需设置
    //4. 设置请求体
    //get请求的请求体为空,因为参数列表拼接到url后面了
    xhr.send(null);
    
    • get请求,设置请求行时,需要把参数列表拼接到url后面
    • get请求不用设置请求头
    • get请求的请求体为null

    发送post请求

    var xhr = new XMLHttpRequest;
    //1. 设置请求行 post请求的参数列表在请求体中
    xhr.open("post", "09.php");
    //2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    //3. 设置请求体
    xhr.send("name=hucc&age=18");
    
    • post请求,设置请求行时,参数列表不能拼接到url后面
    • post必须设置请求头中的content-type为application/x-www-form-urlencoded
    • post请求需要将参数列表设置到请求体中.

    获取响应

    HTTP响应分为3个部分,状态行、响应头、响应体。

    //给xhr注册一个onload事件,当xhr的状态发生状态发生改变时,会触发这个事件。
    xhr.onload = function () { 
        //1. 获取状态行
        console.log("状态行:"+xhr.status);
        //2. 获取响应头
        console.log("所有的相应头:"+xhr.getAllResponseHeaders());
        console.log("指定相应头:"+xhr.getResponseHeader("content-type"));
        //3. 获取响应体
        console.log(xhr.responseText);
    }
    

    readyState

    readyState:记录了XMLHttpRequest对象的当前状态

    //0:请求未初始化。
    //1:请求已经建立,但是还没有开始发送。
    //2:请求已发送,正在处理中
    //3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
    //4:响应已完成;您可以获取并使用服务器的响应了。(我们只需要关注状态4即可)
    

    数据交互

    浏览器端只是负责用户的交互和数据的收集以及展示,真正的数据都是存储在服务器端的。我们现在通过ajax的确可以返回一些简单的数据(一个字符串),但是在实际开发过程中,肯定会会设计到大量的复杂类型的数据传输,比如数组、对象等,但是每个编程语言的语法都不一样。因此我们会采用通过的数据交换格式(XML、JSON)来进行数据的交互。

    XML

    什么是XML

    • XML 指可扩展标记语言(EXtensible Markup Language)
    • XML 是一种标记语言,很类似 HTML
    • XML 的设计宗旨是传输数据,而非显示数据
    • XML 标签没有被预定义。您需要自行定义标签。

    语法规范

    • 第一行必须是版本信息
    • 必须有一个根元素(有且仅有一个)
    • 标签不可有空格、不可以数字或.开头、大小写敏感
    • 不可交叉嵌套,都是双标签,如果是单标签,必须闭合
    • 属性双引号(浏览器自动修正成双引号了)
    • 特殊符号要使用实体
    • 注释和HTML一样
    <students>
        <student>
            <name>张三</name>
            <age>18</age>
            <gender></gender>
            <desc>路人甲</desc>
        </student>
        <student>
            <name>李四</name>
            <age>20</age>
            <gender></gender>
            <desc>路人乙</desc>
        </student>
    </students>
    

    php获取xml文件的内容

    //注意,如果需要返回xml数据,需要把content-type改成text/xml,不然浏览器以text/html进行解析。
    header('content-type:text/xml;charset=utf-8');
    //用于获取文件的内容
    //参数:文件的路径
    $result = file_get_contents("data.xml");
    echo $result;
    

    html解析xml

    //获取服务端返回的xml数据,需要使用xhr.responseXML,这是一个document对象,可以使用DOM中的方法查找元素。
    var data = xhr.responseXML;
    //获取所有的学生
    var students = data.querySelectorAll("student");
    

    缺点:虽然可以描述和传输复杂数据,但是其解析过于复杂并且体积较大,所以实现开发已经很少使用了。

    JSON数据

    JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。

    • 数据在名称/值对中
    • 数据由逗号分隔(最后一个健/值对不能带逗号)
    • 花括号保存对象,方括号保存数组
    • 键使用双引号
        var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的
        var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串
    

    JSON数据在不同语言进行传输时,类型为字符串,不同的语言各自也都对应有解析方法,需要解析完成后才能读取

    php处理json

    • php关联数组==> json
    // php的关联数组
    $obj = array(
      "a"=>"hello",
      "b"=>"world",
      "name"=>"胡聪聪"
    );
    //json字符串
    $json = json_encode($obj);
    echo $json;
    
    • json===>php对象
    $json = '{"a": "Hello", "b": "World"}';//json字符串
    //第一个参数:json字符串
    //第二个参数:
    	//false,将json转换成对象(默认)
    	//true:将对象转换成数组(推荐)
    $obj = json_decode($json,true);
    echo $obj['a'];
    
    //通过json文件获取到的内容就是一个json字符串。
    $data = file_get_contents("data.json");
    //将json转换成数组
    $result = json_decode($data, true);
    print_r($result);
    

    JS处理json

    • JS对象 ==> JSON字符串 JSON.stringify(obj)
        //obj是一个js对象
        var obj = {a: 'Hello', b: 'World'}
        //result就变成了一个json字符串了
        var result = JSON.stringify(obj);// '{"a": "Hello", "b": "World"}'
    
    • JSON字符串 ==> JS对象 JSON.parse(obj)
        //json是一个json字符串
        var json = '{"a": "Hello", "b": "World"}';
        //obj就变成了一个js对象
        var obj = JSON.parse(json);// {a: 'Hello', b: 'World'}
    

    兼容性处理

    var xhr = null;
    if(XMLHttpRequest){
      //现代浏览器
      xhr = new  XMLHttpRequest();
    }else{
      //IE5.5支持
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    

    前后端分离

    ​ 我们使用php动态渲染页面时,有很多比较麻烦的地方。

    • 在前端写好页面以后,需要后台进行修改,意味这后端程序员也需要懂前端的知识,其实渲染的工作应该交给前端来做。
    • 前端没有写好页面的话,后端无法开始工作,需要等待前端的页面完成之后才能开始工作,拖延项目 的进度。
    • 在客户端设备多元化的情况下,后台渲染的页面无法满足所有用户的需求
    • 前后端代码混合在一个文件中,项目修改和维护成本高​

    jQuery中的ajax方法

    jQuery为我们提供了更强大的Ajax封装

    $.ajax

    参数列表

    参数名称描述取值示例
    url接口地址url:“02.php”
    type请求方式get/posttype:“get”
    timeout超时时间单位毫秒timeout:5000
    dataType服务器返回的格式json/xml/text(默认)dataType:“json”
    data发送的请求数据对象、查询字符串data:{name:“zs”, age:18}
    beforeSend调用前的回调函数function(){}beforeSend:function(){ alert(1) }
    success成功的回调函数function (data) {}success:function (data) {}
    error失败的回调函数function (error) {}error:function(data) {}
    complete完成后的回调函数function () {}complete:function () {}

    使用示例:

    $.ajax({
      type:"get",//请求类型
      url:"02.php",//请求地址
      data:{name:"zs", age:18},//请求数据
      dataType:"json",//希望接受的数据类型
      timeout:5000,//设置超时时间
      beforeSend:function () {
        //alert("发送前调用");
      },
      success:function (data) {
        //alert("成功时调用");
        console.log(data);
      },
      error:function (error) {
        //alert("失败时调用");
        console.log(error);
      },
      complete:function () {
        //alert("请求完成时调用");
      }
    });
    

    其他api

    //$.post(url, callback, [dataType]);只发送post请求
    //$.get(url, callback, [dataType]);
    //$.getJSON(url, callback);
    //$.getScript(url,callback);//载入服务器端的js文件
    //$("div").load(url);//载入一个服务器端的html页面。
    

    接口化开发

    请求地址即所谓的接口,通常我们所说的接口化开发,其实是指一个接口对应一个功能, 并且严格约束了请求参数响应结果 的格式,这样前后端在开发过程中,可以减少不必要的讨论, 从而并行开发,可以极大的提升开发效率,另外一个好处,当网站进行改版后,服务端接口进行调整时,并不影响到前端的功能。

    注册接口

    表单序列化

    jquery提供了一个serialize()方法序列化表单,说白就是将表单中带有name属性的所有参数拼成一个格式为name=value&name1=value1这样的字符串。方便我们获取表单的数据。

    //serialize将表单参数序列化成一个字符串。必须指定name属性
    //name=hucc&pass=123456&repass=123456&mobile=18511249258&code=1234
    $('form').serialize();
    
    

    jquery的ajax方法,data参数能够直接识别表单序列化的数据data:$('form').serialize()

    $.post({
      url:"register.php",
      data:$('form').serialize(),
      dataType:'json',
      success:function (info) {
        console.log(info);
      }
    });
    
    展开全文
  • 防止表单重复提交,这是个很重要的知识点,而且很有用。当用户提交了一个表单,此时,地址栏显示的是处理这个表单的Action的地址...有两种方法,可以防止表单重复提交,一种是用Action的重定向,一种是用Session Token

    防止表单重复提交,这是个很重要的知识点,而且很有用。当用户提交了一个表单,此时,地址栏显示的是处理这个表单的Action的地址,若此时刷新,则会重新发送一次表单数据,即又进行了一次提交,若这个Action是用来处理用户注册的,那么重复提交会再一次向数据库中插入之前已经插入的数据,这显然不是我们想要的。有两种方法,可以防止表单重复提交,一种是用Action的重定向,一种是用Session Token(Session令牌)。

    第一种方法,Action处理完用户提交的数据后,重定向到另一个Action或是一个页面,使用户提交后,所停留的位置,不是当前处理数据的Action,这样用户再刷新时,就不会再次执行这个Action了,就会避免表单重复提交的问题了。

    第二种方法,是一种很经典的处理这个问题的机制。这种方法是在用户要提交的表单中,加入一个<s:token>标签,这样,当浏览器第一次访问这个带有<s:token>标签的页面时,在服务器中,解析<s:token>标签的类(TokenTag.class),会生成一个随机的字符串(这个字符串,查看网页的源代码可以看到),并且发送给客户端的浏览器,同时,在服务器中,会把这个随机字符串保存到用户的session对象中。当第一次提交表单时,在服务器中,会比较客户端和服务器中分别保存的这个随机字符串,因为是第一次提交,所以这两个字符串相等,然后进行正常的业务处理。第一次提交后,在服务器中的session中保存的这个随机字符串,会改变为其他的随机值,注意,这是很重要的一步!此时,地址栏停留在处理用户提交数据的Action中,客户端中保存的随机字符串没有改变,若是刷新页面,即重复提交,服务器再进行两个字符串的比较,会不相等,就会跳转到name为invalid.token的结果页面中,这样就会防止表单重复提交了。

    第一种方法的举例,在上一篇博客中,这里就不再列出了,这里主要举例说明一下session token的机制:

    [html]  view plain  copy
    1. Login.jsp:  
    2.   
    3. <s:form action="/test/token" theme="simple">  
    4.         username:<s:textfield name="username"></s:textfield><br>  
    5.         password:<s:password name="password"></s:password><br>  
    6.         <s:submit value="submit"></s:submit>  
    7.         <s:token></s:token><!--一定要有这个标签-->  
    8.     </s:form>  
    [html]  view plain  copy
    1. struts.xml:  
    2.   
    3. <action name="token" class="com.suo.actions.TokenAction">  
    4.             <result name="success">/WEB-INF/result/LoginResult.jsp</result>  
    5.             <result name="invalid.token">/WEB-INF/result/TokenFailed.jsp</result>  
    6.             <!-- 若重复提交,则会跳转到这个页面,注意这里result的名字,一定要是invalid.token -->  
    7.               
    8.             <interceptor-ref name="token"></interceptor-ref>  
    9.             <interceptor-ref name="defaultStack"></interceptor-ref>  
    10.             <!-- 这里一定要有这两个拦截器 -->  
    11.         </action>  
    [java]  view plain  copy
    1. TokenAction.java:  
    2.   
    3. package com.suo.actions;  
    4.   
    5. import java.util.Map;  
    6.   
    7. import javax.servlet.http.HttpServletRequest;  
    8. import javax.servlet.http.HttpSession;  
    9.   
    10. import org.apache.struts2.ServletActionContext;  
    11.   
    12. import com.opensymphony.xwork2.ActionContext;  
    13. import com.opensymphony.xwork2.ActionSupport;  
    14.   
    15. public class TokenAction extends ActionSupport {  
    16.     private String username;  
    17.     private String password;  
    18.       
    19.     public String getUsername() {  
    20.         return username;  
    21.     }  
    22.     public void setUsername(String username) {  
    23.         this.username = username;  
    24.     }  
    25.     public String getPassword() {  
    26.         return password;  
    27.     }  
    28.     public void setPassword(String password) {  
    29.         this.password = password;  
    30.     }  
    31.       
    32.     public String execute()  
    33.     {     
    34.         return SUCCESS;  
    35.     }  
    36. }  


    结果页面就不写了

    原博文地址:http://blog.csdn.net/hackerain/article/details/6990121

    PS:

    Struts2 解决表单的重复提交问题:(两种方式:①Action的重定向②如下)
    I. 在 s:form 中添加 s:token 子标签
    > 生成一个隐藏域
    > 在 session 添加一个属性值
    > 隐藏域的值和 session 的属性值是一致的. 
    II. 使用 Token 或 TokenSession 拦截器. 
    > 这两个拦截器均不在默认的拦截器栈中, 所以需要手工配置一下
    > 若使用 Token 拦截器, 则需要配置一个 token.valid 的 result
    > 若使用 TokenSession 拦截器, 则不需要配置任何其它的 result
    III. Token VS TokenSession
    > 都是解决表单重复提交问题的
    > 使用 token 拦截器会转到 token.valid 这个 result
    > 使用 tokenSession 拦截器则还会响应那个目标页面, 但不会执行 tokenSession 的后续拦截器. 就像什么都没发生过一样!
    IV. 可以使用 s:actionerror 标签来显示重复提交的错误消息. 
    该错误消息可以在国际化资源文件中覆盖. 该消息可以在 struts-messages.properties 文件中找到
    struts.messages.invalid.token=The form has already been processed or no token was supplied, please try again.

    展开全文
  • 表单主要用于收集网页上浏览者的相关信息,其标签为:<form>...</form>,其基本语法格式如下:???????????? <form action="url" method="get" enctype="mime"> </form> 其中,action...

    1.表单标签

    表单主要用于收集网页上浏览者的相关信息,其标签为:<form>...</form>,其基本语法格式如下:👇👇👇 

    <form action="url" method="get" enctype="mime">
    </form>

    其中,action中的内容指定处理提交表单的格式,它可以是一个URL地址或者一个电子邮件地址。method中的内容指明提交表单的HTTP方法。enctype中的内容指明用来把表单提交给服务器时的互联网媒体形式。 

    简单的实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			下面是用户登录信息
    			<br/>
    			用户名称
    			<input type="text" name="user"/>
    			<br/>
    			用户密码
    			<input type="password" name="password"/>
    			<br/>
    			<input type="submit" value="登录"/>
    		</form>
    	</body>
    </html>

     

    2.文字字段 

    2.1 单行文本输入框(text) 

    文本框是一种让访问者自己输入内容的表单对象,通常用来填写单个字或者简单的回答,代码格式如下:👇👇👇 

    <input type="text" name="..." size="..." maxlength="..." value="...">

    其中,type="text"定义单行文本输入框。

    name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称。

    size属性定义文本框的宽度,单位是单个字符宽度。

    maxlength属性定义最多输入的字符数。

    value属性定义文本框的初始值。具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			请输入您的姓名
    			<input type="text" name="yourname" size="20" maxlength="15"/>
    			<br/>
    			请输入您的地址
    			<input type="text" name="youraddress" size="20" maxlength="15"/>
    		</form>
    	</body>
    </html>

    2.2 多行文本输入框(textarea)

    多行文本输入框主要用于输入较长的文本信息,代码格式如下:👇👇👇 

    <textarea name="..." cols="..." rows="..." wrap="...">
    </textarea>

    其中,name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称。

    cols属性定义多行文本框的宽度;rows属性定义多行文本框的高度。

    wrap属性定义输入内容大于文本域时的显示方式。具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			请简述您最近的学习情况<br/>
    			<textarea name="yourstudy" cols="50" rows="10"></textarea>
    			<br/>
    			<input type="submit" value="提交"/>
    		</form>
    	</body>
    </html>

    2.3 密码域(password)

    密码输入是一种特殊的文本域,主要用于输入一些保密信息。当网页浏览者输入文本时,显示的是黑点或者其他符号,这样就增加了输入文本的安全性。代码格式如下:👇👇👇 

    <input type="password" name="..." size="..." maxlength="..."/>

    其中,type="password"定义密码框。name属性定义密码框的名称,要保证唯一性。

    size属性定义密码框的宽度。maxlength属性定义最多输入的密码字符数。具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			用户姓名:
    			<input type="text" name="yourname"/><br/>
    			登录密码:
    			<input type="password" name="yourpassword"/><br/>
    		</form>
    	</body>
    </html>

    2.4 单选按钮(radio)

    单选按钮主要是让网页浏览者在一组选项里选择一个。代码格式如下:👇👇👇 

    <input type="radio" name="..." value="..."/>

    其中,type="radio"定义单选按钮。

    name属性定义单选按钮的名称,单选按钮都是以组为单位使用的,在同一组中的单选选项都必须使用同一个名称。

    value属性定义单选按钮的名称,在同一组中,它们的值必须是不同的。具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			请选择您感兴趣的图书类型:<br/>
    			<input type="radio" name="book" value="Book1"/>网站编程<br/>
    			<input type="radio" name="book" value="Book2"/>办公软件<br/>
    			<input type="radio" name="book" value="Book3"/>设计软件<br/>
    			<input type="radio" name="book" value="Book4"/>网络管理<br/>
    			<input type="radio" name="book" value="Book5"/>黑客攻防<br/>
    		</form>
    	</body>
    </html>

    2.5 复选框(checkbox)

    复选框主要是让网页浏览者在一组选项里同时选择多个选项(也即多选框),每个复选框都是一个独立的元素,都必须有一个唯一的名称。代码格式如下:👇👇👇 

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

    其中,type="checkbox"定义复选框。

    name属性定义复选框的名称,在同一组中的复选框都必须用同一个名称。

    value属性定义复选框的值。具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			请选择您感兴趣的图书类型:<br/>
    			<input type="checkbox" name="book" value="Book1"/>网站编程<br/>
    			<input type="checkbox" name="book" value="Book2"/>办公软件<br/>
    			<input type="checkbox" name="book" value="Book3"/>设计软件<br/>
    			<input type="checkbox" name="book" value="Book4"/>网络管理<br/>
    			<input type="checkbox" name="book" value="Book5"/>黑客攻防<br/>
    		</form>
    	</body>
    </html>

    2.6 下拉菜单

    使用 select + option 可以创建单选或多选下拉菜单。具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<select>
    			<option>列表1</option>
    			<option>列表2</option>
    			<option>列表3</option>
    			<option>列表4</option>
    		</select>
    	</body>
    </html>

    在运行结果中,点击下拉菜单的小箭头,即可看到我们设置的下拉菜单中的几个选项:列表1、列表2、列表3、列表4。

    2.7 列表框  

    列表框主要用于在有限的空间里设置多个选项,即可用作单选,也可用作多选。代码格式如下:👇👇👇 

    <select name="..." size="..." multiple>
    <option value="..." selected>...</option>
    </select>

    其中,size属性定义下拉选择框的行数。name属性定义下拉选择框的名称。

    multiple属性表示可以多选,如果不设置本属性,那么只能单选。

    value属性定义选择项的值。selected属性表示默认已经选择本选项。具体实例如下:👇👇👇 

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			请选择您感兴趣的图书类型:<br/>
    			<select name="book" size="3" multiple>
    				<option value="Book1" selected>网站编程</option>
    				<option value="Book2">办公软件</option>
    				<option value="Book3">设计软件</option>
    				<option value="Book4">网络管理</option>
    				<option value="Book5">黑客攻防</option>
    			</select>
    		</form>
    	</body>
    </html>

    2.8 普通按钮(button)

    普通按钮用来控制其他定义了处理脚本的处理工作。代码格式如下:👇👇👇

    <input type="button" name="..." value="..." onclick="...">

    其中,type="button"定义普通按钮。name属性定义普通按钮的名称。value属性定义按钮的显示文字。

    onclick属性表示单击行为,也可以是其他的事件,通过指定脚本函数来定义按钮的行为。

    具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			点击下面的按钮,把文本框1中的内容复制到文本框2中:<br/>
    			文本框1:<input type="text" id="field1" value="学习HTML的技巧"/><br/>
    			文本框2:<input type="text" id="field2"/><br/>
    			<input type="button" name="..." value="点击我" onclick="document.getElementById('field2').value
    				=document.getElementById('field1').value"/>
    		</form>
    	</body>
    </html>

    上图的运行结果中,在文本框1中输入相应的内容,之后点击下面的按钮“点击我”即可将文本框1的内容复制到文本框2中。

    2.9 提交按钮(submit)

    提交按钮用来将输入的信息提交到服务器。代码格式如下:👇👇👇 

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

    其中,type="submit"定义提交按钮。name属性定义提交按钮的名称。

    value属性定义按钮的显示文字。通过提交按钮可以将表单里的信息提交给表单里action所指向的文件。

    具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form action="https://www.baidu.com" method="get">
    			请输入你的姓名:
    			<input type="text" name="name"/><br/>
    			请输入你的电话:
    			<input type="text" name="telephone"/><br/>
    			请输入你的身份证号:
    			<input type="text" name="IDCard"/><br/>
    			<input type="submit" value="提交"/>
    		</form>
    	</body>
    </html>

    在以上三个文本框中输入相应的内容,之后点击“提交”按钮,即可实现将表单中的数据发送百度的首页(action="https://www.baidu.com")。

    2.10 重置按钮(reset)

    重置按钮用来重置表单中输入的信息。代码格式如下:👇👇👇 

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

    其中,type="reset"定义重置按钮。name属性定义重置按钮的名称。value属性定义按钮的显示文字。

    具体实例如下:👇👇👇

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML简单学习</title>
    	</head>
    	
    	<body>
    		<form>
    			请输入用户名称:
    			<input type="text" name="name"/><br/>
    			请输入用户密码:
    			<input type="password" name="password"/><br/>
    			<input type="submit" value="登录"/>
    			<input type="reset" value="重置"/>
    		</form>
    	</body>
    </html>

    以上运行结果中,在两个文本框中输入相应的内容,点击“重置”按钮即可清空两个文本框中的所有内容。

    展开全文
  • 在Web安全领域,XSS和CSRF是最常见的攻击方式
  • form表单提交到servlet的两种方法

    千次阅读 2017-09-28 16:01:39
    form表单提交到servlet的两种方法: 第一种方法: 1. 用于登录的jsp页面有一个form表单用于提交用户名和密码 2. 创建一个名为LoginServlet的Servlet,下面是doGet与doPost部分 3. 配置web...
  • 作为一名程序员,特别是java web开发的程序员,在使用servlet/jsp的时候,我们必须要知道实现页面跳转的两种方式的区别和联系:即转发和重定向的区别。 1、RequestDispatcher.forward方法只能将请求转发给同一个...
  • 数据库访问方式

    千次阅读 2019-04-20 16:17:22
    数据库访问方式
  • HTML5中表单验证的8方法

    万次阅读 2016-11-07 14:43:52
    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。...之所以说表单验证是一优化,是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面,设计表单验证是为了让W
  • linux访问网页命令

    千次阅读 2021-03-09 15:53:32
    微信设置水滴昵称,个性带点萌 一、CURL --- 命令行浏览器 Curl是Linux下一个很强大的http命令行工具 这东西现在已经是苹果机上内置的命令行工具之一了,可见其魅力之一斑 1) curl http://www.yahoo.com ...
  • python动态爬取网页两种方法

    千次阅读 2019-12-18 08:45:51
    常规动态网页爬取的两种方法1、逆向分析爬取动态网页1.1、所用到扩展库1.2、以爬取首页“新书”模块的新书名、作者和价格信息为例2、使用Selenium库爬取动态网页(浏览器补丁下载地址)2.1、 安装Selenium库及下载...
  • CGI提交表单两种方式POST与GET

    千次阅读 2014-12-17 10:25:23
    Http定义了与服务器交互的不同方法,最基本的方法有4,分别是GET,POST,PUT,DELETE。URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP的GET,POST,PUT,DELETE就...
  • 浏览器使用的两种方式:POST和GET

    千次阅读 2017-08-29 20:35:16
    浏览器使用的两种方式:POST和GETPOST和GET都能完成相同的事情——把表单数据发送给服务器——不同的是他们使用的方式。POST,把表单变量打包后隐藏在后台发送给服务器;GET也是把表单变量打包,不过在他向浏览器...
  • 常用的Web安全认证方式

    万次阅读 2019-05-26 20:13:12
    这是一最古老的安全认证方式,这种方式就是简单的访问API的时候,带上访问的username和password,由于信息会暴露出去,所以现在也越来越少用了,现在都用更加安全保密的认证方式,可能某些老的平台还在用。...
  • 写在前面 博主近期有时间的话,一直在抽空看Django相关的项目,苦于...本博客记录的是《Django web 应用开发实战》这本书第八章表单与模型的相关内容,主要内容是表单与数据库的交互。编译环境如下: Python3.7 py
  • 最近安全测评,遇到Web站点越权访问的事情,平时开发都没太在意,现在通过项目测评才意识到问题的严重性;...处理方式两种: a)系统页面不多,直接在Web站点过滤器filter增加session判断,需要在登录后sess...
  • Linux命令行访问网页

    万次阅读 多人点赞 2018-06-04 11:03:22
    在Linux下有两种常用的浏览器: 控制台下可以使用 lynx ; X-window 可以使用 netscape 的 Linux版本 ; 它们的使用方法与在Windows的浏览器基本类似。 转自:...
  • form表单提交数据给后台

    千次阅读 2021-07-01 03:36:47
    1.完整登录示例1. form表单往后端提交数据注意三点1.所有获取用户输入标签都应该放在form表单里面2.action属性控制往哪儿提交,method一般都是设置成post3.提交按钮必须一定是type='submit'4.input标签... Django...
  • Python开发-Django表单

    千次阅读 热门讨论 2021-11-29 14:40:55
    Django提供了一系列的工具和库来帮助您构建表单来接收网站访客的输入,然后处理以及响应这些输入
  • 【HTTP】Linux命令行访问网页

    万次阅读 2020-02-29 15:08:37
    一、CURL --- 命令行浏览器 Curl是Linux下一个很强大的http...在Linux下有两种常用的浏览器: 控制台下可以使用lynx; X-window可以使用netscape的Linux版本; 它们的使用方法与在Windows的浏览器基本类似。
  • 客户端表单提交数据方式与服务器获取数据

    万次阅读 热门讨论 2013-06-16 20:29:37
    表单提交数据的两种方式  表单form的提交有两种方式,一种是get的方法,通过超级链接后面的参数提交过来,一种是post ,通过Form表单提交过来。 post方式: method="post" action="login.aspx"> 用户名...
  • 十八、HTTP 和表单 原文:HTTP and Forms 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 通信在实质上必须是无状态的,从客户端到服务器的...
  • selenium的常见表单元素操作

    万次阅读 2022-02-10 14:56:27
    是一个用于Web应用程序测试的工具,可以直接运行在浏览器当中,并可以驱动浏览器执行指定的动作,如点击、下拉、填充数据、删除cookie等操作,还可以获取浏览器当前页面的源代码,就像用户在浏览器操作一样。...
  • 访问靶机,观察页面,开始时首先加载了一张图片,随后刷新回显时间,并且网页每隔一段时间会刷新一次,频率大概五秒一次 F12查看源码,和观察的一样,setTimeout("document.form1.submit()",5000)每隔五秒钟将会...
  • HTML 表单 (form) 的作用解释

    千次阅读 2017-08-29 15:35:44
    表单网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、...
  • 1.解析url生成请求 ...发送消息给WEB服务器的步骤需要操作系统来完成,浏览器本身并不具备将消息发送给服务器的功能。但是系统发送前必须要知道服务器的IP有了明确...首先我们知道url输入的是域名,例如入www .baidu...
  • Web全栈~02.表单样式设计

    万次阅读 多人点赞 2021-01-05 15:06:43
    Web基本教程~02.表单 上一期
  • 文章目录1:网络爬虫介绍2:HttpClients类介绍2.1 HttpGet参数问题2.2 HttpPost参数问题2.3 连接池技术问题3:Jsoup介绍4:动手实践如何抓取网页上数据并保存到自己数据库 有一句话说的好,只要精神不滑坡,办法总...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 82,862
精华内容 33,144
关键字:

网页中访问表单的两种方式