HTML课堂讲义（5）

来源：互联网发布：策略游戏知乎编辑：程序博客网时间：2024/06/08 19:56

表单的概念：表单主要是用来获取客户端用户信息的，比如：注册表单、查询表单、登录表单的工作原理：浏览有表单的网页，填写必要的信息，然后点击提交按钮进行提交，这些数据就会通过互联网传到服务器上，服务器上有专门的程序对表单数据进行验证（比如登录表单），验证成功就会执行相应的操作（登录成功，或是将数据保存起来），如果失败了则会返回错误信息。
所以，一张完整的表单的制作分成两个部分：一个是前台页面的制作，一个是后台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 属性可以看这里

http://www.w3school.com.cn/tags/att_form_method.asp

二、在使用input元素时可以通过label元素来为某些表单控件定义标签，当用户选择这个标签的时候，浏览器就会自动将焦点转到和标签相关的表单控件上。

三、input元素的类型可以通过修改属性type的值来改变，默认为text，关于这些值的信息可以看这里

http://www.w3school.com.cn/tags/att_input_type.asp

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

效果：
input中type属性的10个属性值

阅读全文

1 0