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. 014-配置SSH免密钥登录

    问题:client端需要免密钥登录服务器server如何配置?1.前提:客户端已安装openssh-client;服务端已安装openssh-server;服务器端22号端口已经打开2.需要密钥登录时 ...

  2. 人生苦短之我用Python篇（socket编程）

    socket模块 实现简单的远程连接: 客户端: import socket client = socket.socket()#声明socket类型,同时生成socke连接t对象 client.con ...

  3. mysql性能优化1

    当我们去设计数据库表结构,对操作数据库时(尤其是查表时的SQL语句),我们都需要注意数据操作的性能.这里,我们不会讲过多的SQL语句的优化,而只是针对MySQL这一Web应用最多的数据库.希望下面的这 ...

  4. [Data Access] ORM 原理 (11): 效能議題

    這絕對是 ORM 的使用者,開發人員與 DBAs 共同想要問的議題,到底我使用了 ORM 和使用傳統的 ADO.NET 下 SQL 指令的方式會差多少? 這個問題不但會發生在 Entity Frame ...

  5. Linux命令: 替换字符串

    敲命令按以下顺序 ①vim filename ②e ③i ④ESC 1    :s/str1/str2    把当前行的第一个str1替换成str2 2    :s/str1/str2/g    把当 ...

  6. MyBatis学习笔记(八)——Mybatis3.x与Spring4.x整合

    转自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/4271627.html 一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn arc ...

  7. iframe嵌套

    iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...

  8. chrome谷歌浏览器用这种方式清除缓存比较方便了，必须是调试模式才行

     chrome谷歌浏览器用这种方式清除缓存比较方便了  PS:必须是调试模式才行,可以不是手机模式 ,有些低版本浏览器可能没有这个功能.   ----------------------------- ...

  9. http://bugs.mysql.com/bug.php?id=72123

    今天某个环境发生了这个bug. http://bugs.mysql.com/bug.php?id=72123

  10. Java中的三大框架分别有什么用

    一.Spring Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯.Spring的架构基础是 ...