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

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表单标签插入组件的更多相关文章

  1. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  2. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

  3. Kure讲HTML_列表标签及表单标签

    首先我上个图来告诉大家什么是列表 左侧的这一部分就可以称为是列表或者叫树,其实我们可以通过div+css实现列表,可是考虑语义化的问题,我们还是看看html提供好的列表标签,html提供了两种列表,一 ...

  4. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  6. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...

  7. struts2:表单标签

    目录 表单标签1. form标签2. submit标签3. checkbox标签4. checkboxlist标签5. combobox标签6. doubleselect标签7. head标签8. f ...

  8. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  9. SpringMVC 表单标签 & 处理静态资源

    使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...

随机推荐

  1. Http请求帮助类

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  2. c++ 重载、覆盖 (隐藏)(virtual)

    背景:不用说,学习C++的你,一定知道这是个词--至于难不难懂,就看你的理解能力了,我理解也是费劲千辛万苦啊,成员函数的重载.覆盖(override).隐藏.virtual 很容易混淆,C++程序员必 ...

  3. 链接正常但IE浏览器无法显示网页的几种情况

    一.感染病毒木马所致 这种情况往往表现在打开IE时,在IE界面的左下框里提示:正在打开网页,但一直无响应. 右击任务栏/任务管理器/进程,查看.如果CPU占用率100%,可以断定是感染了病毒,这时要查 ...

  4. 撩课-Web大前端每天5道面试题-Day28

    1.用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别? 首先来看setInterval的缺陷,使用setInterval()创建的定时器确保了定 ...

  5. leetcode树专题894.897,919,951

    满二叉树是一类二叉树,其中每个结点恰好有 0 或 2 个子结点. 返回包含 N 个结点的所有可能满二叉树的列表. 答案的每个元素都是一个可能树的根结点. 答案中每个树的每个结点都必须有 node.va ...

  6. 解决hash冲突之分离链接法

    解决hash冲突之分离链接法 分离链接法:其做法就是将散列到同一个值的所有元素保存到一个表中. 这样讲可能比较抽象,下面看一个图就会很清楚,图如下 相应的实现可以用分离链接散列表来实现(其实就是一个l ...

  7. 常见Java问题二

    1.什么是B/S架构?什么是C/S架构? B/S browser/server Web应用程序 C/S Client/Server 桌面应用程序 2.String str="www" ...

  8. CentOS 7 镜像下载

    新版本系统镜像下载(当前最新是CentOS 7.4版本) CentOS官网 官网地址 http://isoredirect.centos.org/centos/7.4.1708/isos/x86_64 ...

  9. python常用模块-01

    1. 简单了解模块 写的每一个py文件都是一个模块. 还有一些我们一直在使用的模块 buildins 内置模块. print, input random 主要是和随机相关的内容 random()    ...

  10. .net4.0多进程间共享内存实现通信(VB.Net)

    .net4.0新增内存共享功能,从而很方便的实现了多进程间通信. 源码下载