form标签

最新推荐文章于 2024-06-07 23:26:45 发布

Valder__

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量145

点赞数

分类专栏：前端html 文章标签：前端 html

本文链接：https://blog.csdn.net/Valder__/article/details/127157706

版权

前端html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

form表单标签

作用：

收集并提交用户的信息给指定服务器，其所收集的是form标签内的数据

action：地址

method：方式，包括get和post

表单域标签

作用：

给用户提供输入数据或选择的地方

使用：

文本框：input type=“text”

text:收集少量的文本数据，用户可见

possword:用户不可见，会成为黑点

name

<html>
    <head>
	    <title>form标签</title>
		<meta charset="UTF-8"/>
	<head/>
	    <!--
		    form表单标签
			作用：收集并提交用户的信息给指定服务器
			      其所收集的是form标签内的数据
				  
		    action：表示所收集的数据所提交的地址，就是URL
			        #会自己提自己
			method：表所提交的方式
			        包括get：适合小量数据 表单数据以？隔开，拼接在URL后面，键值对中间用&隔开，不安全
					    post：适合大量数据，安全，不在URL后显示
						
			使用：
			    表单标签中写表单域标签
				再点击数据提交时，form标签会将其中的表单域标签中用户书写的数据按照method的方式进行提交
				提交到action的指定地址
			
			表单域标签
			作用：给用户提供输入数据或选择的地方
			使用：
			    文本框：input type="text"
				        text:收集少量的文本数据，用户可见
				        possword:用户不可见，会成为黑点
						name:数据提交的键，也会被js使用
			
			注：表单数据的提交，提交的表单必须拥有name属性值，否则不会提交
			    输入之后按登录会在网页路径的地方提交输入的数据
				提交的数据为键值对，键为name属性的值，值为用户输入的数据
				
		-->
    <body>
		<h3>form标签学习</h3>
		<hr />
		<form action="#"   method="get">
		    用户名：<input type="text" name="uname" value="张三"/><br />
            <!--value是默认值，直接会显示在文本框中-->
			密码：<input type="password" name="upwd"/><br />
			<input type="submit" value="登录"/><br />
			
			<!--form表单的提交目前需依赖于submit提交按钮，必须要写，不然无法提交-->
		</form>
		
	</body>
</html>

单选框标签

格式

input type=“radio” name=“” value=“” checked=“checked”

注：所有单选框若name属性一样则只能选一个

<html>
    <head>
	    <title>单选框学习</title>
		<meta charset="UTF-8"/>
	</head>
    <body>
	    <h3>单选框学习</h3>
		<hr />
        
		<form>
		    性别：男<input type="radio" name="sex" value="1" checked="checked"/>
			      女<input type="radio" name="sex" value="0"/><br>
		    <!--
			    默认提交不会提交男女等前面的与单选框无直接关系的值，若不设置value，则提取默认值
			    一般还会设置一个默认值checked,默认选此选项
			-->
		
		    <input type="submit" value="登录"/>
		</form>
	</body>
</html>

多选框标签

<form>
爱好：唱歌<input type="checkbox" name="fav" value="1"/>
			      跳舞<input type="checkbox" name="fav" value="2"/>
			      跑步<input type="checkbox" name="fav" value="3"/><br />
		    <!--
		        多选框
				    input type="checkbox" name="" value="" checked="checked"
					name值必须相同，value值不同，提交的是value
		    -->
</form>

设置多/单选框大小

在css中写

input{
	height:10px;
	transform:scale(1.5);/*设置单选多选框的大小，（）内大于1是放大，小于1是缩小*/
}

下拉框选项

select其下面有子标签，下拉选项，用option,一个option代表一个下拉选项
在select上声明name属性
也有默认选项selected

<select name="address">
		<option value="0">--请选择--</option>
		<option value="1">北京</option>
	    <option value="2">上海</option>
		<option value="3" selected="selected">山西</option>
</select><br />

文本域

textarea name=“intro” rows=“10” cols=“30”

row：行数

cols：列数

<textarea name="intro" rows="10" cols="30"></textarea><br />

普通按钮

不具备数据提交功能
input type=“button” id=“” value=“”

<input type="button" id="" value="普通按钮"/>

隐藏标签

数据必须随着用户的提交而提高，但又不能显示给用户，挺重要的
input type=“hidden” name=“” id=“” value=“”
在页面上不显示，但在提交的数据中可以看到定义的数据

<input type="hidden" name="hidden" id="" value="hh"/>

重置按钮

可以清除数据

reset

<form action="/study/login.jsp"   method="get">	
	<input type="reset" id="" value="清除数据" style="background-color:#C4E1FF;" />
</form>

使用按钮跳转到指定页面

<!--在button中嵌套a标签，会生成跳转按钮，跳转至href指定的页面-->
<button id="face" style="background-color:#FFDCB9;">
	<a href="" style="color:black;" target="_blank">使用Facebook账号登录</a>
</button>

使按钮居中

<center>
	<input type="submit" value="提 交" id="in1"/>
</center><!--用center将按钮居中-->