zoukankan      html  css  js  c++  java
  • 表单类标签--随笔

    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>
    如有错误,望费心指出。 感激涕零。
  • 相关阅读:
    【kafka学习之五】kafka运维:kafka操作日志设置和主题删除
    【Redis学习之十一】Java客户端实现redis集群操作
    FastDFS:Java客户都实现文件的上传、下载、修改、删除
    DevOps之四:Git & GitLab
    代码静态检查Eclipse插件:SonarLint插件离线安装
    DevOps之三:CentOS7.3 安装部署Jenkins(三种方式) & Hudson
    DevOps之三:Maven私服Nexus使用 && 清理nexus历史镜像
    DevOps之三:搭建Maven私服Nexus
    DevOps之二:搭建SVN服务器(SvnAdmin)
    财务对账
  • 原文地址:https://www.cnblogs.com/zouxiaopq/p/12578502.html
Copyright © 2011-2022 走看看