首页 > 其他分享 >590 HTML标签_表单标签_表单项input2 and 592 HTML标签_表单标签_表单项select&textarea

590 HTML标签_表单标签_表单项input2 and 592 HTML标签_表单标签_表单项select&textarea

时间:2022-10-22 10:58:03浏览次数:52  
标签:单项 标签 表单 HTML 按钮 select

表单选项标签

   file:文件选择框
  hidden:隐藏域,用于提交一些信息。
    按钮:
      submit:提交按钮。可以提交表单
      button:普通按钮
       image:图片提交按钮
       src属性指定图片的路径    

  label:指定输入项的文字描述信息
注意:
  label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。

  select: 下拉列表
  子元素:option,指定列表项
            
textarea:文本域
cols:指定列数,每一行有多少个字符
rows:默认多少行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--提交的网址    是否在地址栏显示   -->
    <form action="#" method="get">
        <!--   用户别名找到对于运行的标签            输入框         名字           输入框显示字段          前面别名的id-->
        <labet for="qwe">用户名</labet><input type="text" name="username" placeholder="请输入用户名" id="qwe"><br>
        <!--   用户别名找到对于运行的标签            输入框         名字           输入框显示字段          前面别名的id-->
        <labet for="eqw">密码</labet><input type="password" name="gender" placeholder="请输入密码" id="ewq"><br>
              <!--      单选框            赋值名字      提交的信息区分性别-->
        性别:<input type="checkbox" name="gender" value="male" checked> 男
             <input type="checkbox" name="gender" value="famale"> 女<br>
             <!--      单选框            赋值名字      提交的信息区分性别-->
        爱好:<input type="checkbox" name="hobby" value="guangjie">逛街
             <input type="checkbox" name="hobby" value="chifan">吃饭
             <input type="checkbox" name="hobby" value="shuijiao">睡觉
             <input type="checkbox" name="hobby" value="dadoudoud">打豆豆<br>

        图片:<input type="file" name="file"><br>
        隐藏域<input type="hidden" name="id" value="aaa"><br>
        <!--根据路径去选择磁盘下的图片-->
        <!--取色器 -->
        <input type="color" name="color"><br>
        <!--包括年月日不包括时间-->
        生日:<input type="date" name="birthday"><br>
        <!--包括年月日时分秒,几分之1秒。基于UTC时区-->
        生日:<input type="datetime-local" name="birthday"><br>
        <!--datetime-local,包括年月日时分秒,几分之1秒。不带时区-->
        <!--定义输入数字的字段-->
        年龄:<input type="number" name="age"><br>
        <!--输入邮箱格式非邮箱格式有提醒-->
        邮箱:<input type="email" name="email"><br>
        <!--提交信息到地址栏-->
        省份:<select name="province">
        <!--定义列表项 并提交到地址栏-->
        <option>---请选择---</option>
        <option value="1">北京</option>
        <option value="2">河北</option>
        <option value="3">上海</option>
        <option value="4">北海</option>
    </select><br>
        <!--手动在页面输入信息-->
        <!--可输入五行一行20个字符 指定提交-->
        自我介绍:<textarea cols="20" rows="5" name="des"></textarea>




        <input type="submit" value="登录">
        <input type="button" value="一个按钮">
        <input type="image" src="img/regbtn.jpg">
    </form>
</body>
</html>

 

标签:单项,标签,表单,HTML,按钮,select
From: https://www.cnblogs.com/agzq/p/16815548.html

相关文章

  • 注册页面案例练习标签
    设置一个注册表<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登录注册演示</title></head><body><!--定义表单form-->......
  • 列表标签 超链接
    列表标签:有序列表:ol;li;无序列表ul;li    链接标签a:定义一个超链接属性href:指定访问资源的URL(统一......
  • CSS与HTML结合方式和CSS语法格式
    3.CSS的使用:CSS与html结合方式 1.内联样式 *在标签内使用style属性指定css代码 *如:<divstyle="color:red;">hellocss</div> 2.内部样......
  • Vue笔记4 过滤器、表单v-model\高级函数
      item.price|showPrice过滤器用法              -------------------------------------------------------  --------------......
  • HTML标签案例注册页面
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表单标签</title></head><body><!--form:用于定义表单可以定一个范围......
  • 浏览器标签页工具插件
    manifest.json{"name":"TabTool","description":"修改localhost网页title","version":"0.1.0","manifest_version":3,"permissions":["storage",......
  • CSS与html的结合方式、CSS语法格式
    CSS与html的结合方式<!--内联样式,在标签内使用style属性指定css代码--><divstyle="...">Hello</div><head><metacharset="UTF-8"><title>Title</ti......
  • HTML标签-表格标签1和HTML标签-表格标签2
    HTML标签-表格标签1table:定义表格width:宽度border:边框cellpadding:定义内容和单元格的距离cellspacing:定义单元格之间的距离。如果指定为0,则单元格的......
  • HTML5基础
    HTML5基础一.标签基础(集合)<!DOCTYPE>文档类型声明,在代码的第一行出现;<html>根元素标签;属于有结束语</html>的标签包含两个标签:<head>,<body>;<head>有结束......
  • vue 用 input 和 canvas 标签实现前端背景图片的移动 重绘 上传
    前言:    闲得无聊写的,嫌麻烦的直接出门左转搜索vuecropper.js模块直接用就行正文:  首先我们要知道input是自带file方法的,直接可以选这文件上传就行,但为了......