分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

028、HTML 标签3表单标签插入组件

发布时间:2023-09-06 02:21责任编辑:赖小花关键词:HTML组件

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

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>

028、HTML 标签3表单标签插入组件

原文地址:https://www.cnblogs.com/-nbloser/p/9937784.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved