HTML表单组件

一、说明

form标签里面的东西

二、效果图

三、代码

 <!DOCTYPE html>

 <html>

 <head>

 <title>Form.html</title>

 <meta name="keywords" content="keyword1,keyword2,keyword3">

 <meta name="description" content="this is my page">

 <meta name="content-type" content="text/html; charset=UTF-8">

 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 </head>

 <body>

     This is my HTML page.

     <br>

     <form action="">

         <!-- 必须要有name和value属性，不然服务器无法获取数据，name是组件的名字，

         name是提交服务器是服务对这个数据的键值，value是这个组件的值

         -->

         输入名称：<input type="text" name="user" value=""><br />

         输入密码：<input type="password" name="pwd" /><br />

         <!-- checked是默认选择，默认选择女，用户少点一步，很方便，后面还有selected也是默认选择的意思 -->

         选择性别：<input type="radio" name="sex" value="nan"  />男

                   <input type="radio" name="sex" value="nv" checked="checked" />女<br />

         选择技术：<input type="checkbox" name="tech" value="java" />JAVA

                   <input type="checkbox" name="tech" value="html" />HTML

                   <input type="checkbox" name="tech" value="css" />CSS <br />

         <!-- 选择文件这个功能特别方便 -->

         选择文件：<input type="file" name="file" /><br />

         <!-- 图片组件，拥有提交功能 ，在我们需要用自制的提交按钮时用，毕竟默认的太丑 -->

         一个图案：<input type="image"  src="11.jpg"/><br />

         <!-- 隐藏组件，数据用户不需要知道，但是可以将其提交到服务器，比如你算出来的数据 -->

         隐藏组件：<input type="hidden" name="myke" value="nyvalue"/> <br />

         <!-- 用于自定义功能的按钮组件,onclick="alert('有个按钮')",单双引号嵌套，alert弹出对话框 -->

         一个按钮：<input type="button" value="有个按钮" onclick="alert('有个按钮')" /><br />

         <!-- 上面是input组件，里面有10个属性，下面看select属性 -->

         <select name="country">

             <option value="none" >--选择国家--</option>

             <option value="usa" >美国</option>

             <option value="en" >英国</option>

             <option value="cn" >中国</option>

         </select>

         <br />

         <!-- textarea属性，比如说写个人简介的时候，贼好用 -->

         <textarea rows="" cols="" name="text"></textarea>

         <br />

         <input type="reset" value="清除数据" /><br />

         <input type="submit" value="提交数据"/><br />

     </form>

 </body>

 </html>

HTML表单组件的更多相关文章

  1. 微信小程序-表单组件

    button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...

  2. Vue组件之自定义表单组件

    今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...

  3. Form( 表单) 组件

    本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件.一． 加载方式表单组件只能在 JS 区域设置,首先定义一张表单.<form id="box ...

  4. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  5. 「小程序JAVA实战」小程序的表单组件（25）

    转自:https://idig8.com/2018/08/18/xiaochengxujavashizhanxiaochengxudebiaodanzujian25/ 来说下 ,小程序的基础组件.源码 ...

  6. 第二百二十一节，jQuery EasyUI，Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  7. 【09】react 之 表单组件

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  8. Django form表单 组件

    目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...

  9. Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...

  10. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

随机推荐

  1. Java中如何优雅地删除List中的元素

    在工作中的许多场景下,我们都会使用到List这个数据结构,那么同样的有很多场景下需要删除List中的某一个元素或某几个元素,那么我们该如何正确无误地删除List中的元素的,今天我来教大家三种方式. 前 ...

  2. label--input

    .form-group { margin-bottom: 15px; position: relative;}.control-label{ float: left; width: 15%; text ...

  3. python练习题，写一个方法 传进去列表和预期的value 求出所有变量得取值可能性（例如list为[1,2,3,4,5,6,12,19]，value为20，结果是19+1==20只有一种可能性），要求时间复杂度为O(n)

    题目:(来自光荣之路老师)a+b==valuea+b+c=valuea+b+c+d==valuea+b+c+d+...=valuea和b....取值范围都在0-value写一个方法 传进去列表和预期得 ...

  4. Linux 远程连接sftp与ftp

    linux sftp远程连接命令 sftp -oPort=60001 root@192.168.0.254 使用-o选项来指定端口号. -oPort=远程端口号 sftp> get /var/w ...

  5. centos 网卡名称修改

    在centos6.4之前,如果6.2,6.3安装后网卡名称都是em开始,如果想用eth0这种名称,或者是自定义名称,可以参照以下来实施. 第一步:修改/boot/grub/grub.conf增加一个 ...

  6. 关于QStandardItemModel

    类QabstractItemModel,QabstractListModel,QAbstractTableModel不保存数据,用户需要从这些类派生出子类,并在子类中定义某种数据结构来保存数据.与此不 ...

  7. 关于RSU和股票期权（Stock Option）

    最近,和有些猎头沟通时,他们提到RSU的概念,特地搜了下,其和股票期权(Stock Option)差别如下: RSU 和Option 一般都是逐年实现的,比如Offer Letter签三年,上写的给你 ...

  8. 20145310 《网络对抗》 MSF基础应用

    实验要求 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路. 一个主动攻击,如ms08_067; 一个针对浏览器的攻击,如ms11_050: 一个针对客户端的攻击,如Adobe 成 ...

  9. Android实践项目汇报总结（下）

    微博客户端的设计与实现(下) 第四章 系统详细功能实现 本应用实现了如下主要模块:程序启动模块.登录授权模块.主界面显示模块撰写发表微博模块.用户发布信息模块.软件设置模块. 4.1程序启动模块实现 ...

  10. 20165310_获奖感想与Java阶段性学习总结

    获奖感想与Java阶段性学习总结 一.Learning By Doing ​ 在此之前,其实我并没有想到能够成为小黄杉的第一批成员之一,喜悦之余,也感受到了许多的压力.小黄杉一方面代表了老师对于我这一 ...