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>
028、HTML 标签3表单标签插入组件的更多相关文章
- [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- 5.22 HTML 列表标签和表单标签
1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li: listitem 列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...
- Kure讲HTML_列表标签及表单标签
首先我上个图来告诉大家什么是列表 左侧的这一部分就可以称为是列表或者叫树,其实我们可以通过div+css实现列表,可是考虑语义化的问题,我们还是看看html提供好的列表标签,html提供了两种列表,一 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- 制作Html标签以及表单、表格内容
制作Html一般用DW(......),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...
- struts2:表单标签
目录 表单标签1. form标签2. submit标签3. checkbox标签4. checkboxlist标签5. combobox标签6. doubleselect标签7. head标签8. f ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- SpringMVC 表单标签 & 处理静态资源
使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...
随机推荐
- Spring基础(9) : 自动扫描
一 配置xml方式:扫描com包下的bean <?xml version="1.0" encoding="UTF-8" ?> <beans ...
- 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布
很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...
- Maven的配置与下载
一丶下载 前提条件 :已经安装配置好了Jdk 进入maven官网选择自己看上的版本:http://maven.apache.org/ 下载后解压开始配置环境! 二丶配置环境变量 新建系统变量 其实不建 ...
- Digital Square(hdu4394)搜索
Digital Square Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 输出字符串中最长的单词 C# 算法
要求: 设计一个算法从一片英语文章或者英语字符串里面输出其中最长的单词. Input: string Output: string 尽可能多的设计测试用例来测试这个算法. 考虑空间和时间复杂度 ...
- 漫画 | Redis常见面试问题(二)
上期,小知和阿音在进行面试问答,可是呢,还没问完小知就表示累了想休息一会,然后就休息去了,但是,以为这样就完了吗? 当然不是,还得继续啊,嘿嘿嘿 注:对于第一种,需要应用程序自己处理资源的同步,可以使 ...
- hadoop的namenode启动失败
1.jps发现namenode启动失败 每次开机都要重新格式化一下namenode才可以 其实问题出现自tmp文件上,因为每次开机就会被清空,所以现在我们配置一个tmp文件目录. 如果之前没有配置过, ...
- 封装7z软件实现批量文件或目录压缩
哈哈,作为一个特别懒的运维人来说 兄弟我写了一个批量压缩文件或目录的小工具,用来批量压缩文件目录 弄一下,然后就不用管他了,后天看结果就好了 操作步骤: 1.选择想做压缩处理的根目录 2.选择你要的功 ...
- POJ3304(KB13-C 计算几何)
Segments Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15335 Accepted: 4862 Descrip ...
- 【代码笔记】iOS-My97DatePicker日历
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...