表单

神之子zp

于 2020-12-27 22:11:47 发布

阅读量104

点赞数

分类专栏：表单

本文链接：https://blog.csdn.net/qq_27630677/article/details/111825989

版权

表单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表单

表单语法

<form method="post" action="result.html">
</form>

method:规定如何发送表单数据，常用值：get | post

表单元素格式

<input type="text" name="fname" value="text"/>

属性	说明
type	指定元素的类型。text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认为text
name	指定表单元素的名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是没被选中

表单元素

文本框

<input type="text" name="userName" value="用户名" size="30" maxlength="20">

"text":文本框
"userName":文本框名称
"用户名":文本框初始值
"30":文本框长度
"20":文本框可输入最多字符

密码框

<input type="password" name="pass" size="20"/>

"password":密码框
"pass":密码框的名称
"20":密码框的长度

单选按钮

<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女

"radio":单元框按钮
"男":值
checked:单选按钮选中状态

复选框

<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" checked>聊天
<input type="checkbox" name="interest" value="play">玩游戏

"checkbox":复选框
"sports":值
checked:复选框选中状态

列表框

<select name="列表名称" size="行数">
<option value="选项的值" selected></option>
</select>

select:列表框
selected:默认选中项
option:选项

按钮

<input type="reset" name="butReset" value="reset按钮">
<input type="image" src="images/login.gif"/>
<input type="button" name="butButton" value="button按钮">

"reset":重置按钮
"image":提交按钮
"button":普通按钮
src:图片路径
value:按钮上显示的文字

多行文本域

<textarea name="showText" cols="x" rows="y">文本内容</textarea>

textarea:多行文本域
"x":显示的列数
"y":显示的行数

文件域

<form action="" method="post" enctype="multipart/form-data">
	<p>
		<input type="file" name="files"/>
		<input type="submit" name-"upload" value="上传">	
	</p>
</form>

file:文件域
"multipart/form-data":表单编码属性

邮箱

<input type="email" name="mail">

email:邮箱
会自动验证Email格式是否正确

网址

<input type="url" name="userUrl">
会自动验证URL地址格式是否正确

数字

<input type="number" name="num" min="0" max="100" step="10">

number:数字
min:允许的最小值
max:允许的最大值
step:合法的数字间隔

滑块

<input type="range" name="range1" min="0" max="100" step="2">

number:数字
min:允许的最小值
max:允许的最大值
step:合法的数字间隔

搜索框

<input type="search" name="sousuo">

serach:搜索框

示例

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
	</head>
	
	<body>
		<form method="get" action="../20201224/video.html">
			<p><input type="text" name="username"></p>
			<p><input type="password" name="password"></p>
			<p><input name="sex" type="radio" value="男" checked>男 <input name="sex" type="radio" value="女">女</p>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
		</form>
		
	</body>

</html>

效果图在这里插入图片描述

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>广播</title>
	</head>
	
	<body>
		<form action="#" method="get">
			<!--<p>
			<input name="radio" type="radio" value="88.5" checked>88.5<br/>
			<input name="radio" type="radio" value="89.7">89.7<br/>
			<input name="radio" type="radio" value="101.1">101.1<br/>
			<input name="radio" type="radio" value="97.5">97.5<br/>
			<input type="submit" value="提交">
			</p>-->
			<p>您请选择您的兴趣爱好</p>
			<p>
				<input type="checkbox" name="interest" value="sports">体育
				<input type="checkbox" name="interest" value="music">音乐
				<input type="checkbox" name="interest" value="paint">绘画
				<input type="checkbox" name="interest" value="movie">电影
				<input type="checkbox" name="interest" value="reading">阅读
				<input type="checkbox" name="interest" value="work">工作
			</p>
			<input type="submit" value="提交"/>
			
			<p>
			<select name="job">
				<p><option value="teacher" selected="selected">教师</option>
				<option value="student" >学员</option>
				<option value="worker" >工人</option>
				<option value="encourage" >鼓励师</option>
				<option value="wise" >法师</option></p>
				
			
			</select>
			<input type="submit" value="提交">
			</p>
			
			
		</form>
		
	</body>

</html>

效果图
在这里插入图片描述

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>标签的各种其他用</title>
	</head>
	
	<body>
		<form method="get" action="#">
			<!-- 文本域-->
			<textarea name="words" rows="5" cols="100"></textarea>
			
			<p><!-- 文件域-->
				<input type="file" name="files">
				<input type="submit" value="上传文件" name="upload">
			</p>
			
			<p><!-- 邮件-->
				<input type="email" name="mail">
				<input type="submit">
			</p>
			
			<p><!-- 网址-->
				<input type="url" name="url">
				<input type="submit">
			</p>
			
			<p><!-- 数字-->
				<input type="number" name="num" min="0" max="100" step="1" value="0">
				<input type="submit">
			</p>
			
			<p><!-- 滑块-->
				<input type="range" name="range" min="0" max="100"  value="20">
				<input type="submit">
			</p>
			<p><!-- 搜索-->
				<input type="search" name="seh">
				<input type="submit">
			</p>
			
		</form>
		
	</body>

</html>

效果图
在这里插入图片描述

神之子zp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单

表单表单语法表单元素格式表单元素文本框密码框单选按钮复选框列表框按钮多行文本域文件域邮箱网址数字滑块搜索框示例表单语法<form method="post" action="result.html"></form>method:规定如何发送表单数据，常用值：get | post表单元素格式<input type="text" name="fname" value="text"/>属性说明type指定元素的类型。text，passw
复制链接

扫一扫