html表单

最新推荐文章于 2024-07-30 16:49:30 发布

开开心心罗非鱼

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量368

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_59384581/article/details/128097901

版权

表单是可以通过网络接收其他用户数据的平台，例如注册页面的账户密码输入、网上订货页等，都是以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的沟通对话

思维导图

表单的构成

一个表单中又三个部分组成，

（1）表单标签：包含处理表单数据使用的服务器程序url以及数据提交到服务器的方法。

（2）表单控件：包含文本框、密码框、隐藏框、复选框、单选按钮、下拉以及文件上传等

（3）单表按钮：包含提交、重置和普通按钮。

创建表单

<form></form>标签用来创建表单。

<form action="url地址" method="get | post" name="表单名称"> 各种表单控件 </form>

action属性

action属性用于指定接收并处理表单数据的服务器程序的url地址。

method属性
method属性用于设置表单数据的提交方式，其取值为get或post。

name属性

name属性用于指定表单的名称，以区分同一个页面中的多个表单。

表单控件

大致可分为input控件、textarea控件、select控件三大类。

input控件

<input />元素是表单中最常见的元素，网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。

<input type="..." name="..." value="..."/>

其中，type属性用来说明提供的用户进行信息输入类型，如文本，密码，单选等

属性值	说明
text	文本框
password	密码框
radio	单选按钮框
checkbox	复选按钮框
submit	提交框
reset	重置效果框
button	使用普通框
file	插入文件框
image	图像形式提交框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<form action="" method="" name="myform">
			用户名：<input type="text" name="username" value="罗非鱼" size="20" maxlength="4"/>
			<br /><br />
			密码：<input type="password" name="password"/>
			<br /><br />
			性别：<label><input type="radio" name="gender" value="man"/>男</label>
				 <input  type="radio" name="gender" value="female" id="nv"/><labe for="nv">女</label>
				 <br /><br />
			兴趣：<input type="checkbox" name="interest" value="sing"/>唱歌
				 <input type="checkbox" name="interest" value="dance"/>跳舞
				 <input type="checkbox" name="interest" value="敲代码" checked="checked" disabled="disabled"/>敲代码<br /><br />
			头像：<input type="file" name="pic"/><br /><br />
			城市：<select name="city">
				<option value="">请选择城市</option>
				<option value="bj">北京</option>
				<option value="gz">广州</option>
				<option value="sh">上海</option>
			</select><br /><br />
			自我介绍：<br />
				<textarea rows="8" cols="30"></textarea><br /><br />
				<input type="submit" value="提交"/>
				<input type="reset" value="重填"/>
				<input type="button" value="普通按钮"/>
		</form>
	</body>
</html>

textarea控件

在表单中如果需要输入大量文字，如评论，特别是包括换行的字时，需要使用到<textarea></textarea>多行文本控件。

<textarea wrap="physical/off/virtual" name="..." clos="..." rows="...">

name属性	多行文本框的名称
cols属性	垂直列。在没有进行样式表设置时，可以表示一行容纳字节数
rows属性	水平行。可以显示的行数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>评论表单</title>
</head>

<body>
 评论：<br />
 <textarea wrap="physical" name="pl" clos="60" rows="4">
 </textarea>
</body>
</html>

罗非鱼好帅是我已经评论的。

select控件

使用<select>可以在浏览器窗口中设置下拉式菜单或者滚动条的菜单，用户可以在菜单中选一个或多个选项。

使用select控件定义下拉菜单的基本语法格式如下：

<select>

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

         ...

</select>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>select标记</title>
</head>

<body>
  出生年：
  <select name="birthYear" >
  	<option value="1998">1998
    <option value="1999">1998
    <option value="2000" selected>2000
    <option value="2001">2001
    <option value="2002">2002
    <option value="2003">2003
    <option value="2004">2004
    <option value="2005">2005
  </select>
 
</body>
</html>

常用的属性值。

所学案例

css部分

@charset "utf-8";
/* CSS Document */
body{font-size:18px; font-family:"微软雅黑"; background:url(timg.jpg) no-repeat top center; color:#FFF;}       
form,p{ padding:0; margin:0; border:0;}   /*重置浏览器的默认样式*/
form{
	width:420px;
	height:200px;
	padding-top:60px;
	margin:250px auto;                      /*使表单在浏览器中居中*/
	background:rgba(255,255,255,0.1);    /*为表单添加背景颜色*/
	border-radius:20px;
	border:1px solid rgba(255,255,255,0.3);
} 
p{
	margin-top:15px; 
	text-align:center;
 } 
p span{
	width:60px;
	display:inline-block; 
	text-align:right;
}
.num,.pass{
	width:165px;
	height:18px;
	border:1px solid rgba(255,255,255,0.3)
	padding:2px 2px 2px 22px;
	border-radius:5px;
	color:#000;
}
.btn01{
	width:165px;
	height:25px;
	border-radius: 3px;	
	margin-left:65px;
	background:#57b2c9;
	color:#fff;	
	border:none;
}

调用css部分和书写文本和密码部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS控制表单样式</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<form action="#" method="post">	
		<p>
		    <span>账号：</span>
			<!--（以字母开头，允许5-16字节，允许字母数字下划线）-->
		    <input type="text" name="username" class="num" 
		    	pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />  
		</p>
		<p>
		    <span>密码：</span>
			<!--以字母开头，长度在6~18之间，只能包含字母、数字和下划线-->
		    <input type="password" name="pwd" class="pass" 			
		    	pattern="^[a-zA-Z]\w{5,17}$"/>
		</p>
		<p>
	    	<input type="button" class="btn01" value="登录"/>
		</p>
	</form>
</body>
</html>