zoukankan      html  css  js  c++  java
  • 028、HTML 标签3表单标签插入组件

    内容:表单标签插入组件(经常使用)
    ##############################################################

    form表单标签和input组件
    <form>
        用户名称:<input type="text" name="username" value="hehe" /><br/>
        输入密码:<input type="password" name="psw" /><br/>
        选择性别:<input type="radio" name="sex" value="nan" /><input type="radio" name="sex" value="nv" checked="checked"/><br/>
        选择技术:<input type="checkbox" name="tech" value="java" />JAVA
                <input type="checkbox" name="tech" value="html" />HTML
                <input type="checkbox" name="tech" value="css" />CSS<br/>
        一个按钮:<input type="button" value="有个按钮" onclick="alert('有个按钮,我弹!')"/><br/>
        隐藏组件:<input type="hidden" name="zhangsan" value="20"/><br/>        
        选择文件:<input type="file" name="file" /><br/>
        图片组件:<input type="image" src="1.jpg" /><br/>
        
        选择国家:
        <select name="country">
            <option value='none'>--选择国家--</option>
            <option value="cn" selected="selected">中国</option>
            <option value="usa">美国</option>
            <option vaue='en'>英国</option>
        </select>
        <br/>
        个人介绍:<textarea rows="4" cols="20"></textarea>
        <input type="submit" value="提交"/><input type="reset" value="恢复默认"/>
    
    </form>


    如果这些值需要提交到服务端的,每个组件的属性都需要name




    ####################################################################################
    浏览器两种提交方式
    以下get和post提交数据来自代码
    <!--
        form标签中的action用于明确目的地。 method属性用于明确提交的方式。
        方式有两种 get post。
        
        get提交的数据:
        地址栏:http://192.168.1.223:9090/?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn
        
        GET /?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn HTTP/1.1
        Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
        Accept-Language: zh-cn
        Accept-Encoding: gzip, deflate
        User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
        Host: 192.168.1.223:9090
        Connection: Keep-Alive
        
        
        
        post提交:
        地址栏:http://192.168.1.223:9090/
        
        POST / HTTP/1.1
        Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
        Accept-Language: zh-cn
        Content-Type: application/x-www-form-urlencoded
        Accept-Encoding: gzip, deflate
        User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
        Host: 192.168.1.223:9090
        Content-Length: 56
        Connection: Keep-Alive
        Cache-Control: no-cache
        
        user=abcd&psw=123&repsw=123&sex=nv&tech=html&country=usa
        
        
        GET和POST的区别:
        区别1:地址栏是否显示信息。
            GET提交,将提交的数据显示在地址栏。
            POST提交,提交数据不显示在地址栏。
            
        区别2:敏感信息是否安全。
            GET提交,提交敏感信息不安全。
            POST提交,提交敏感信息安全。
            
        区别3:数据的体积。
            GET提交,信息存储到地址栏,存储的信息体积有限。
            POST提交,可以提交大体积数据信息。
        
        区别4:提交信息的http封装形式不同。
            GET提交,将提交信息封装到了请求行。
            POST提交,将提交信息封装到了请求体。
            
            
        综上所述:表单提交,建议使用POST.
        
        
        
        问题1:如果表单加入了增强型的校验(只有所有选项都符合规则的情况下,才可以提交)
            这时,服务端收到数据后,还需要校验吗?
            需要,因为客户端有可能避开校验,提交错误的数据到服务端,所以为了安全性,服务端必须做校验。
            
            
        和服务端交互有三种方式:
        1,地址栏输入。get
        2,超链接。get
        3,表单。get post
        
        问题2:服务端如果进行校验,页面还需要做校验吗?
            需要,为了减轻服务端的压力,同时为了增强用户的体验效果。
        
         -->



    #############################################
    加入表格标签,好看,下面实现简单提交

    <body>
    <form action="127.0.0.1:8080" method="get">
        <table border="1" bordercolor="blue" width="700px" cellspacing="0" cellpadding="10">
            <tr>
                <th colspan="2">用户注册</th>
            </tr>
            <tr>
                <th>用户名称:</th>
                <td><input type="text" name="usename"></td>
            </tr>
            <tr>
                <th>输入密码:</th>
                <td><input type="password" name="pwd"></td>
            </tr>
            <tr>
                <td>选择性别:</td>
                <td><input type="radio" name="sex" value="male"/><input type="radio" name="sex" value="female"></td>
            </tr>
            <tr>
                <td>选择技术:</td>
                <td><input type="checkbox" name="tech" value="java">java
                    <input type="checkbox" name="tech" value="HTML">HTML
                    </td>
            </tr>
            <tr>
                <td>一个按钮</td>
                <td><input type="button" value="按钮" onclick="alert('love')"></td>
            </tr>
            <tr>
                <th colspan="2"><input type="submit" value="提交"></th>
            </tr>
        </table>
    
    </form>
    </body>

    ##简单服务器用于执行上面的提交:

    public static void main(String[] args) throws IOException
    {
        ServerSocket ss = new ServerSocket(8080);
        Socket s = ss.accept();
        InputStream is = s.getInputStream();
        byte[] buf = new byte[1024];
        int len = is.read(buf);
        String str = new String(buf,0,len);
        System.out.println(str);
        
        PrintWriter out = new PrintWriter(s.getOutputStream(),true);
        out.println("<font color='blue' size='7'>注册成功</font>");
        
        s.close();
        ss.close();
    }

    ############################################################################
    其他标签

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <body>
    <b>演示</b><i>一下</i><u>其他</u><strong>标签</strong>。语义化
    X<sub>2</sub>  X<sup>2</sup>
    <marquee behavior="slide" direction="down">哇,我会飞啦!</marquee>
    <pre>
    class Demo
    {
        public static void main(String[] args)
        {
            System.out.println("hello");
        }
    }
    </pre>
    </body>
  • 相关阅读:
    移动硬盘和u盘的区别
    U盘文件系统格式
    WARN: Establishing SSL connection
    数据库基本操作命令
    PCM EQ DRC 音频处理
    那些年、那些歌、那些事
    编译与链接
    Flash芯片你都认识吗?
    ACM暑假集训第三周小结
    H
  • 原文地址:https://www.cnblogs.com/-nbloser/p/9937784.html
Copyright © 2011-2022 走看看