表单类标签--随笔

form :用于定义表单。可以定义一个范围，范围代表采集用户的输入的数据的范围
　　属性：
　　　　* action：指定提交数据的URL
　　　　*method：指定的提交方式（共有7中，其中两种最常用）：
　　　　　　　　　get：
　　　　　　　　　　1.请求参数会在地址栏显示，会封装到请求行中去
　　　　　　　　　　2.请求参数是有大小限制的
　　　　　　　　　　3.不安全的请求方式
　　　　　　　　　post：
　　　　　　　　　　1.请求的参数不会在地址栏中显示，会封装在请求体中
　　　　　　　　　　2.请求的参数没有大小限制
　　　　　　　　　　3.先对比较安全的方式

小案例说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <!--是一个表单，需要form标签：用于定义一个范围，这个范围内的数据可以被提交-->
    <form action="#" method="post"><!--method 指定提交方式，默认是get提交，get提交不安全，设置为post-->
            <table width="500" align="center" border="1"><!--align 控制表格位置，center表示居中，border边框的宽度是1px -->
                <tr>
                    <td ><label for="username">用户名</label></td><!--label 控制选择，for指定鼠标点击后跳转到id是username属性的输入框-->
                    <td><input type="text" name="username" id="username"  placeholder="请输入用户名"></td>
                </tr><!---->
                <tr>
                    <td ><label for="password">密码</label></td><!---->
                    <td><input type="password" name="password" id="password"  placeholder="请输入密码"></td>
                </tr><!---->
                <tr>
                    <td ><label for="email">Email</label></td><!---->
                    <td><input type="email" name="email" id="email"  placeholder="请输入邮箱"></td>
                </tr><!---->
                <tr>
                    <td ><label for="name">姓名</label></td><!---->
                    <td><input type="text" name="name" id="name"  placeholder="请输入姓名"></td>
                </tr><!---->
                <tr>
                    <td ><label for="tel">手机号</label></td><!---->
                    <td><input type="number" name="tel" id="tel"  placeholder="请输入手机号"></td>
                </tr><!---->
                <tr>
                    <td >性别</td>
                    <td><!--radio属性是单选属性，但是name必须是一致的-->
                        <input type="radio" name="gender" value="male" checked>男
                        <input type="radio" name="gender" value="female">女
                    </td>
                </tr>
                <tr><!-- date 属性是日期类型，placeholder 是显示输入框里面的提示字符-->
                    <td ><label for="birthday">出生日期</label></td>
                    <td><input type="date" name="birthday" id="birthday"  placeholder="请输入用户名"></td>
                </tr><!---->

                <tr>
                    <td><label for="checkcode">验证码</label></td><!--name 属性用来提交，id属性用来指定前面的for属性-->
                    <td><input type="text" id="checkcode" name="checkcode">
                        <img src="./image/verify_code.jpg">
                    </td><!--img标签指定图片位置，src导入图片的路径 ./是指在当前的路经下-->
                </tr>

                <tr><!--在列td中 clospan指定合并列，表示占两列 ，type是submit属性是提交按钮 value值是显示的值-->
                    <td colspan="2" align="center" ><input type="submit" value="注册"></td>
                </tr>


            </table>

    </form>
</body>
</html>

 

posted @ 2020-06-30 16:10  后来者。  阅读(287)  评论(0)    收藏  举报