html表单

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

思维导图 

表单的构成 

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

(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>

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值