初学者:html中的表单详解(下面附有代码)

初学者:html中的表单详解(下面附有代码)表单的理解与解释表单:采集不同类型的用户输入数据,发送给服务器,实现用户和服务器之间的数据交互。表单标签form声明数据采集的范围,只要是在form中的,都是要采集的数据。一个页面中可以有多个form标签,只能是并列关系,不能嵌套。只能是兄弟关系,,不能是父子关系。用户向服务器端发送数据时,一次只能提交一个表单中的数据。如果要提交多个表单就需要用js中的异步交互。表单元素method属性:提交表单时所用的http方法,默认为get方法。get方式:将数据作为url地址的一部分发送给服务器

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

表单的理解与解释
表单:采集不同类型的用户输入数据,发送给服务器,实现用户和服务器之间的数据交互。

表单标签form 声明数据采集的范围,只要是在form中的,都是要采集的数据。

一个页面中可以有多个form标签,只能是并列关系,不能嵌套。只能是兄弟关系,,不能是父子关系。用户向服务器端发送数据时,一次只能提交一个表单中的数据。如果要提交多个表单就需要用js中的异步交互。

表单元素 method属性:提交表单时所用的http方法,默认为get方法。

get方式:将数据作为url地址的一部分发送给服务器:安全性较低,有长度限制:请求的数据可以被缓存,能够保存在浏览器的历史记录中能作为书签被收藏。

post方式:将数据隐藏在http数据流中进行传输:安全性比get方式要高,

对数据长度没有限制:请求数据不会被缓存,也不会在浏览器的历史记录中保存,更不会作为书签被收藏。

在这里插入图片描述

https://www.baidu.com/?username=11&psd=12 get方式,这是提交之后的网址 https://www.baidu.com/?参数名=参数值&参数名=参数值
?是连接符,后面是提交的内容。

input表单域
单行文本输入框
<input type=**”password”**placeholder=”请输入账号”>密码框
提交按钮

  • 性别:女男
  • **设置性别时必须都写上name=”sex”必须设置相同的name值才能实现单选** **checked是默认选中项,即为一单击进来,默认选中的就是男**
    <li>爱好:<input type=**"checkbox"** name="hob"/>吃饭<input type**="checkbox"** name="hob"/>吃饭<input type="checkbox" name="hob"/>吃饭</li>  **复选框**
    
  • 普通按钮,既不会重置也不会提交
  • 设置button能提交
  • button经过设置也能变成提交按钮和重置按钮。

    扩充一句面试题:
    button按钮的默认类型为:提交

    上传文件
    注意:后台上传文件,必须在form表单中添加enctype属性
    即为:

    图片形式的按钮

  • 在这里插入图片描述

    placeholder和value的区别
    作为占位符来说:value输入的时候需要把请输入账号,这几个字删掉之后在后面才能输入。而placeholder直接能输入
    在这里插入图片描述
    还有一个区别:placeholder仅仅是用来设置提示信息的,而value是用户输入的内容就直接保存在value。
    select下拉列表
    在这里插入图片描述
    在这里插入图片描述
    因为加了selected 所以朝阳区是默认选中的。selected是设置下拉列表的默认选中项。
    文本输入框
    在这里插入图片描述
    在这里插入图片描述
    但是这样的文本框大小是可以改变的。但是在style样式中加入resize:none属性,样式就不会改变了。就设置成了禁止拖动文本框的大小。
    在这里插入图片描述
    label表单标注标签,扩大点击范围。
    比如下图:
    只能点击到框里面才有用,扩大点击范围之后,点在框的旁边也有用。
    一般与单选按钮,复选框组合使用。关联式方式:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    disabled属性:禁用表单元素,被禁用的元素不可用,不可点击,不会被提交
    readonly属性:只读属性,不能修改,可以被提交

    代码参考如下:

    
    ```css
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    		<table>
    			<tr>
    				<th>
    					<span>*</span>邮箱地址:
    				</th>
    				<td>
    					<div>
    						<input type="text" disabled="disabled">
    						<img src="./img/regBg.jpg" alt="注册">
    						<a href="#">我没有邮箱</a>
    			<!--input img a都是行内元素,所以这三个放在一个td里面也能在同一行显示-->
    						<!--有两行内容,所以给了一个div标签-->
    					</div>
    					<p>使用微博账号直接<a href="#">登录</a></p>
    					
    				</td>
    			</tr>
    			<tr>
    				<th>
    					<span>*</span>设置密码:
    				</th>
    				<td>
    					<input type="password" />
    				</td>
    			</tr>
    			<tr>
    				<th>
    					<span>*</span>兴趣标签:
    				</th>
    				<td>
    					<input type="checkbox" name="hob" id="new"/><label for="new">新闻</label>
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    					<input type="checkbox" name="hob" />新闻
    				</td>
    				
    			</tr>
    			<tr>
    				<th>
    					<span>*</span>验证码:
    				</th>
    				<td>
    					<input type="text" />
    					<img src="img/yanzhengma.jpg" alt="验证码">
    					<a href="#">看不清?</a>
    				</td>
    			</tr>
    			<tr>
    				<th></th><!--空的th占位-->
    				<td><input type="submit" value="立即注册"/></td>
    			</tr>
    			<tr>
    				<th></th>
    				<td><a href="#">《新浪网络服务协议》</a></td>
    			</tr>
    		</table>
    	<body>
    	</body>
    </html>
    
    

    “`图示如下:
    在这里插入图片描述
    代码如下:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> textarea{ 
         
    				resize: none;
    			}
    			li{ 
         
    				list-style: none;
    			}
    		</style>
    	</head>
    	<body>
    		<form action="#" enctype="multipart/form-data">
    			<ul>
    				<li>账号:<input type="text" name="useId" placeholder="请输入账号" /></li>
    				<li>密码:<input type="password" name="psd" placeholder="请输入密码" /></li>
    				<li>性别:<input type="radio" name="sex" checked="checked"/>女<input type="radio" name="sex"/>男</li>
    				<li>爱好:<input type="checkbox" name="hob"/>吃饭<input type="checkbox" name="hob"/>吃饭<input type="checkbox" name="hob"/>吃饭</li>
    				<input type="file" /> 上传文件
    				<li><input type="image" src="./1.jpg" alt="提示文字"  width="50px" height="50px"/></li>
    				
    				<li>籍贯:
    					<select>
    						<option value="北京">北京</option>
    						<option value="上海">上海</option>
    						<option value="深圳">深圳</option>
    					</select>
    					<select>
    						<option value="海淀区">海淀区</option>
    						<option value="朝阳区" selected>朝阳区</option>
    						<option value="通州区">通州区</option>
    					</select>
    				</li>
    				
    				<textarea rows="5" cols="5">
    					
    				</textarea>
    				
    				<li><input type="submit" value="提交" /></li>
    				<li><input type="reset" value="重置" /></li>
    				
    				<li><input type="button" name="" id="" value="普通按钮" /></li>
    				<li><button type="submit" >设置button能提交</button></li>
    				<li><button>button</button></li><!--button默认类型为提交-->
    			</ul>
    		</form>
    	</body>
    </html>
    
    

    图示如下:
    在这里插入图片描述
    时间比较紧迫,没有写详细样式,以上供大家参考。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/169651.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • WinHTTP AutoProxy 函数

    WinHTTP AutoProxy 函数WinHTTPAutoProxy函数WinHTTPimplementstheWPADprotocolusingtheWinHttpGetProxyForUrlfunctionalongwithtwosupportingutilityfunctions,WinHttpDetectAutoProxyConfigUrlandWinHttpGet

  • idea集成svn使用教程_idea svn使用教程

    idea集成svn使用教程_idea svn使用教程1IDEA集成SVN1.1下载SVN客户端这里使用的是TortoiseSVN,下载后安装,然后记住安装路径。官方下载地址:TortoiseSVN官方下载地址1.2安装SVN客户端在安装svn客户端的时候一定要勾选,否则在idea上集成svn的时候会找不到svn.exe而报错。如果安装时忘记勾选了的话,安装包重新运行,选择modify,然后勾选commandlinecl…

    2022年10月17日
  • xmind 使用教程[通俗易懂]

    1.这是刚刚打开xmind后的界面,在中央有一个中心主题,你可以把它替换成你自己的主题,比如图形推理。2、把光标定位到中心主题上,然后连续按3次Tab键,你会看到上面效果。tab键可以帮助你迅速的建立某个主题的子主题。3、下面你在连续按3次回车键,你就可以看到上面的效果,你可以通过回车键,建立同级主题。4、你自己在试一试,玩一玩者两个键吧!(tab键和enter回车键)5、如何改变主题的分布方式,你还要学习使用“右键”,选择一个主题,然后点击“右键”,你会发现有很多选择。6、选

  • 图像生成与图像处理_matlab中colorbar是什么意思

    图像生成与图像处理_matlab中colorbar是什么意思1colorBar介绍colorBar主要是指一些图像处理中使用的常见纯色或者渐变色条。colorBar用途可作为测试样图来验证某些图像算法的效果,从而避免图像内容或者硬件对图像的干扰,使图像算法

  • Java 解决中文乱码问题

    Java 解决中文乱码问题一:服务端解析客户端二:客户端解析服务端三:Filter设置编码四:Get提交中文乱码

  • Ubuntu 20.04 安装 Docker

    Ubuntu 20.04 安装 Docker检查Ubuntu内核docker需要ubuntu的内核高于3.10uname-rDocker安装#新增更新源sudoecho”debhttps://download.docker.com/linux/ubuntuzestyedge”>/etc/apt/sources.list#step1:安装必要的一些系统工具sudoapt-getupdatesudoapt-get-yinstallapt-transport-httpsca-certi

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号