【HTML】6.表单标签指定服务器

  • 表单提交到指定服务器
    • action属性值:用于指定表单数据提交的目的地(服务端)。
    • method属性值:用于明确提交方式,get/post。如果不定义,method默认是get。
  • 表单程序

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的页面title>
head>
<body>
<fieldset>
<legend>注册区域legend>
    <form action="http://127.0.0.1:9090" method="post">
        <table border="1" cellspacing="0" cellpadding="10" width="600" >
            <tr>
                <th colspan="2">注册页面th>
            tr>
            <tr>
                <td>用户名td>
                <td><input type="text" name="username"/>td>
            tr>
            <tr>
                <td>用户密码td>
                <td><input type="password" name="passworld"/>td>
            tr>
                <tr>
                <td>性别td>
                <td>
                    <input type="radio" name="sex" value="boy"/><input type="radio" name="sex" value="girl"/>td>
            tr>
            <tr>
                <td>兴趣td>
                <td>
                    <input type="checkbox" name="interest" value="音乐"/>音乐
                    <input type="checkbox" name="interest" value="运动"/>运动
                    <input type="checkbox" name="interest" value="漫画"/>漫画
                td>
            tr>
            <tr>
                <td>国家td>
                <td>
                    <select name="country">
                        <option value="none">选择国家option>
                        <option value="Chinese">中国option>
                        <option value="USA">美国option>
                   select>
                td>
            tr>
            <tr >
                <th colspan="2">
                    <input type="submit" value="提交"/>
                    <input type="reset"/>
                th>
            tr>
        table>
    form>
fieldset> 
body>
html>
  • 服务器端
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;

public class Server {
    public static void main(String[] args) throws IOException {
        ServerSocket ss = new ServerSocket(9090);
        while(true) {
            Socket s = ss.accept();
            InputStream d = s.getInputStream();
            byte[] buf = new byte[1024];
            int len = d.read(buf);
            String str = new String(buf, 0, len);
            System.out.println(str);        
            PrintWriter p = new PrintWriter(s.getOutputStream(), true);
            p.println("注册成功");
            s.close();
            d.close();
        }  
    }
}
  • get提交后地址栏:
http://127.0.0.1:9090/?username=%E5%8D%81%E5%A4%9A%E4%B8%AA&passworld=ffgwe&sex=girl&interest=%E6%BC%AB%E7%94%BB&country=USA
  • 存到服务器的内容
GET /?username=%E5%8D%81%E5%A4%9A%E4%B8%AA&passworld=ffgwe&sex=girl&interest=%E6%BC%AB%E7%94%BB&country=USA HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-CN
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0)
Host: 127.0.0.1:9090
Connection: Keep-Alive
Cookie: com.springsource.sts.run.embedded=true
  • post提交后地址栏
http://127.0.0.1:9090/
  • 存到服务器内容
POST / HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-CN
Content-Type: application/x-www-form-urlencoded
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0)
Host: 127.0.0.1:9090
Content-Length: 78
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: com.springsource.sts.run.embedded=true

username=123&passworld=123&sex=boy&interest=%E8%BF%90%E5%8A%A8&country=Chinese
  • get和post区别:
    • get提交:提交的数据显示在地址栏,提交敏感信息不安全,数据存储在地址栏,所以存储的信息有限。提交的数据封装到了http消息头的第一行,请求行中。
    • post提交:提交的数据不显示在地址栏,提交敏感信息安全,可以提交大体积数据信息。提交的数据封装到消息头后,在请求数据体中。
    • get解析中文比post麻烦
  • 建议使用post,因为编码方便。
  • 但是get比较简单(百度一下就是get),既不涉及大体数据又不涉及敏感信息,就可以使用get。

  • 表单校验

    • 表单和服务器都需要进行输入校验
    • 表单需要校验,是因为要减轻服务端校验压力,同时增强用户的体验效果。
  • 和服务器交互有三种方式
    • 地址栏,get
    • 超链接,get(就是地址栏的简化形式,将地址封装,直接单击超链接访问)
    • 表单,get/post

你可能感兴趣的:(前端)