表单的概念:表单主要是用来获取客户端用户信息的,比如:注册表单、查询表单、登录表单的工作原理:浏览有表单的网页,填写必要的信息,然后点击提交按钮进行提交,这些数据就会通过互联网传到服务器上,服务器上有专门的程序对表单数据进行验证(比如登录表单),验证成功就会执行相应的操作(登录成功,或是将数据保存起来),如果失败了则会返回错误信息。
所以,一张完整的表单的制作分成两个部分:一个是前台页面的制作,一个是后台PHP对表单数据的处理。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
</head>
<body>
<!-- 制作一个简单的表单,因为不会PHP和SQL所以只能先写一个简单的跳转了…… -->
<center>
<form action="test2.html" method="post" name="form">
<!-- <form action="login.php" method="post" name="form"> -->
<!-- login.php是表单程序处理文件,name用来给表单取名字 -->
<!-- method是表单的提交方式,取值为get或post -->
<!-- action是指定表单的处理程序,一般是PHP文件 -->
用户名:<input type="text" name="username"><br></input>
<pre> 密码:<input type="password" name="pwd"><br></input></pre>
<input type="submit" value="提交"><br></input>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
<!-- label为input元素定义标记 -->
</form>
<!-- username=admin和pwd=123456是表单提交的数据,又称为“查询字符串” -->
<!-- input用来搜集用户输入的信息,根据不同的type属性值可以转变输入的形式(文本字段、按钮等) -->
</center>
</body>
</html>
效果:
tip
一、method有两种取值:get和post。get是将表单数据追加到action指定的处理程序的后面,然后向服务器发出请求。post则是直接将表单数据传给表单处理程序。
get方式的特点:
1. get不能提交敏感内容(如密码);
2. get只能提交少量数据,因为地址栏的长度有限制;
3. get不能上传附件
post方式的特点:
1. post提交的数据相对安全,因为post传输数据的时候会将数据作为单独的事务传给表单处理程序,你至少还有机会给它加密(通过属性enctype来指定表单数据的编码方式),而get则是将数据直接接在URL后面,很容易被黑客获取。
2. post可以提交大量的数据,这与它传输数据的方式有关。
3. post可以上传附件
关于HTML<form>
标签的 method 属性可以看这里
二、在使用input元素时可以通过label元素来为某些表单控件定义标签,当用户选择这个标签的时候,浏览器就会自动将焦点转到和标签相关的表单控件上。
三、input元素的类型可以通过修改属性type的值来改变,默认为text,关于这些值的信息可以看这里
(w3school真是好网站)
不同的type值带来的不同的效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input中type属性的10个属性值</title>
</head>
<body bgcolor="white">
<font size="5" color="black">
this is "button":<input type="button" value="Button"><br></input>
<!-- button:定义可点击按钮 -->
this is "checkbox":<input type="checkbox" value="
Checkbox"><br></input>
<!-- checkbox:定义复选框 -->
this is "file":<input type="file" value="File"><br></input>
<!-- file: 定义输入字段和 "浏览"按钮,供文件上传。-->
this is "hidden":<input type="hidden" value="Hidden"><br></input>
<!-- hidden:定义隐藏的输入字段 -->
this is "image":<input type="image" src="testPic.jpg" alt="testPic"><br></input>
<!-- image:定义图像形式的提交按钮,使用该形式的时候必须把src和alt连用。 -->
<!-- src提供提交按钮显示的图像的URL,alt为图像输入规定替代文本 -->
<!-- src和alt都只能与image配合使用,不同的在于src必须要有,而alt则不强制使用。但一般情况下建议加上alt以避免在显示的时候造成障碍 -->
this is "password":<input type="password"><br></input>
<!-- password:顾名思义,定义密码字段 -->
this is "radio":<input type="radio"><br></input>
<!-- radio: 定义单选按钮-->
this is "reset":<input type="reset" value="Reset"><br></input>
<!-- reset:定义重置按钮,清楚表单中所有的数据 -->
this is "submit"<input type="submit" value="Submit"><br></input>
<!-- submit:定义提交按钮,用于向服务器发送表单数据 -->
</font>
</html>
效果: