HTML课堂讲义（5）

最新推荐文章于 2022-05-30 16:58:18 发布

不惧神风

最新推荐文章于 2022-05-30 16:58:18 发布

阅读量641

点赞数 1

分类专栏：作业文章标签： html

本文链接：https://blog.csdn.net/w8692736/article/details/75669748

版权

作业专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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