首页 > 其他分享 >HTML标签表单标签表单项select&textarea以及注册页面

HTML标签表单标签表单项select&textarea以及注册页面

时间:2022-10-26 09:36:10浏览次数:53  
标签:textarea 标签 表单 HTML select 页面

HTML标签-表单标签-表单项select&textarea

select:下拉列表

  子元素:option:指定列表项

      selected:默认选项

textarea:文本域:

  cols:每一行有多少个字符

  rows:默认多少行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--
        form:用于定义表单的,可以定义一个范围,范围代表了采集用户数据的范围
            属性:
                 action:指定提交数据的URL(用于完成输入提交的位置)
                 method:指定提交方式
                    分类:一共有7种,2种比较常用
                        get:
                            1.请求参数会在地址栏中显示
                            2.请求参数大小是限制的
                            3.不太安全
                        post:
                            1.请求参数不会再地址中显示,会封装在请求体中(HTTP协议后讲解)
                            2.请求参数的大小没有限制
                            3.较为安全0.
                                              0表单项中的数据要想被提价:必须指定其name属性
     -->
<form action="#" method="post">
    账号:<input name="username" type=""><br>
    密码:<input name="password"><br>
    <input type="submit" value="提交"><!--提交按钮-->
</form>

    <hr>

    <!--
        表单属性
    -->
<form action="#" method="get">
    <!--指定输入项的文字描述信息 label-->
    <label for="username">账号</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    <label for="password">密码</label>:<input type="password" name="password" placeholder="请输入密码" id="password"><br>
    <!--单选框-->
    性别:<input type="radio" name="gender" value="男">男
         <input type="radio" name="gender" value="女">女<br>
    <!--复选框-->
    爱好:<input type="checkbox" name="hobby" value="睡觉"> 睡觉
    <input type="checkbox" name="hobby" value="睡觉"> 睡觉
    <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <br>
    <!--图片选择框 file-->
    图片:<input type="file" name="file"><br>
    <!--隐藏域框 hidden-->
    隐藏域:<input type="hidden" name="hidden" value="aaa"><br>
    <!--取色器 color-->
    取色器:<input type="color" name="color"><br>
    <!--日期 date-->
    生日:<input type="date" name="date"><br>
    <!--具体日期 datetime-local-->
    生日具体时间:<input type="datetime-local" name="datetime"><br>
    <!--邮箱 email-->
    邮箱:<input type="email" name="email"><br>
    年龄:<input type="number" name="number"><br>
    省份:<select name="province"><!--下拉框 select-->
            <option>--请选择--</option><!--列表项 option-->
            <option value="1" selected>北京</option>
            <option value="2">上海</option>
            <option value="3">陕西</option>
        </select><br>
    自我描述:<textarea name="textarea" cols="20" rows="5"></textarea>
    <br>
    <!--提交按钮 submit-->
    <input type="submit" value="提价">
    <!--普通按钮 button-->
    <input type="button" value="一个按钮"><br>
    <!--图片提交 image-->
    <input type="image" src="image1/regbtn.jpg">
</form>

</body>
</html>

 

 

 

 

HTML标签-案例1-注册页面(HTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例1-注册页面</title>
</head>
<body>
<!--表格-->
<table border="1" width="25%" align="center">
    <!--表单-->
    <form action="https://baike.baidu.com/item/%E7%AC%A8%E8%9B%8B/2890" method="get">
    <tr><!--一行-->
        <td><!--一列-->
            用户名:
        </td><!--一列-->
        <td><!--一列-->
            <!--本文框-->
            <input type="text" name="text" placeholder="请输入用户名">
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td><!--一列-->
            密码:
        </td><!--一列-->
        <td><!--一列-->
            <!--密码框-->
            <input type="password" name="password" placeholder="请输入密码">
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td><!--一列-->
            Email:
        </td><!--一列-->
        <td><!--一列-->
            <!--邮箱框-->
            <input type="email" name="email">
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td><!--一列-->
            姓名:
        </td><!--一列-->
        <td><!--一列-->
            <!--文本框-->
            <input type="text" name="text" placeholder="请输入真实姓名">
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td><!--一列-->
            手机号:
        </td><!--一列-->
        <td>
            <!--数字框-->
            <input type="number" name="number" placeholder="请输入您的手机号">
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td><!--一列-->
            性别:
        </td><!--一列-->
        <td><!--一列-->
            <!--单选框  默认值-->
            <input type="radio" name="readio" checked>男
            <input type="radio" name="readio">女
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td><!--一列-->
            出生日期:
        </td><!--一列-->
        <td><!--一列-->
            <!--出生日期框-->
            <input type="date" name="date">
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td><!--一列-->
            验证码
        </td><!--一列-->
        <td><!--一列-->
            <!--文本框-->
            <input type="text" width="10">
            <!--图片路径-->
            <img src="image1/verify_code.jpg" width="80">
        </td><!--一列-->
    </tr><!--一行-->

    <tr><!--一行-->
        <td colspan="2" align="center"><!--一列-->
            <!--文本的提交按钮-->
            <input type="submit" value="注册">
        </td><!--一列-->
    </tr><!--一行-->
    </form>
</table>
</body>
</html>

运行结果:

 

标签:textarea,标签,表单,HTML,select,页面
From: https://www.cnblogs.com/qihaokuan/p/16825986.html

相关文章

  • HTML标签_文件标签HTML标签_文本标签1HTML标签_文本标签2
    HTML标签_文件标签html:html文档的根标签 head:头标签。用于指定html文档的一些属性。引入外部的资源title:标题标签body:体标签......
  • 第二十七章 使用 CSP 进行基于标签的开发 - CSP 标记语言
    第二十七章使用CSP进行基于标签的开发-CSP标记语言CSP标记语言CSP标记语言是一组指令和标记,可用于控制CSP编译器生成的类。当编译CSP文档时,结果是一个执行......
  • 【转】VUE 动态绑定 html 的 class
            ......
  • 【HTML&CSS】唉,我以为行内元素都不能设置宽高
    又是面试驱动学习的一天常见的行内元素有哪些?abr img input label object span select textarea行内的置换元素是可以设置宽高的,置换元素有哪些呢?让我们来......
  • k8s-标签(labels)
    官网https://kubernetes.io/zh-cn/docs/concepts/overview/working-with-objects/labels/标签(Labels)是附加到Kubernetes对象(比如Pod)上的键值对。标签旨在用于指定......
  • HTML三详解
    Web存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行......
  • HTML5详解二
    本文主要内容拖拽历史地理位置全屏拖拽如上图所示,我们可以拖拽博客园网站里的图片和超链接。在HTML5的规范中,我们可以通过为元素增加draggable="true"......
  • 初始HTML
    编辑器相关前端开发的编辑器软件,个人首先推荐VSCode,其次推荐SublimeText。有人说WebStorm也不错?但真实情况是,自从VSCode问世之后,用WebStorm的人越来越少了。PS......
  • HTML图片标签和HTML列表标签
    HTML图片标签:图片标签:img元素:src:路径width:宽度height:高度align:对齐方式<imgsrc="img/http.pic.jpg"width="400"height="200"align="right">有两种方式:一种......
  • HTML标签表单标签概述和表单项input1
    HTML-标签-表单标签概述表单:概念:用于采集用户输入的数据,用于和服务器进行交互(如:QQ)form:用于定义表单的,可以定义一个范围,范围代表了采集用户数据的范围......