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. EL—表达式

    El的数据访问操作: 1:获取变量名(四大作用域中的变量?六大作用域?) 只能从这六个区域中拿数据!!! 2:获取对象的属性值 3:获取集合元素 4:执行表达式 1:获取变量名(四大作用域中的变量) ...

  2. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  3. n的相反数

    实例十:n的相反数 方法:result=(~n)+1 正数 负数 原数 0000 0011   1111 1111补码 1111 1100 0000 0010加一 1111 1011 0000 001 ...

  4. Multinoulli distribution

    https://www.statlect.com/probability-distributions/multinoulli-distribution3 Multinoulli distributio ...

  5. webstorm使用心得

    收藏夹功能:当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单 面包屑导航:除了左侧的工程页面,可以选择目录之外, ...

  6. linux常用命令：iostat 命令

    Linux系统中的 iostat 是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会 汇报出CPU使用情况 ...

  7. 英语笔记-some words about description of girl

     what did you learn from your last class?20:09:07abc360.Draven/PHH-HA04 ☠ 2018/4/9 20:09:07 poop20:1 ...

  8. iOS &Android 项目 Jenkins持续集成

    背景:由于之前的jenkins机器软件环境较老(mac系统 和 Xcode版本等太低).设备性能也是比较差,编译相关脚本也不大适合目前业务,所以,跟infra部门重新申请了一台固定ip .高配的mac ...

  9. 安装SQL2008时显示：RebootRequiredCheck 检查是否需要挂起计算机重新启动。

    解决方法: a.在开始->运行中输入regeditb.删除HKEY_CURRENT_USER\Software\Microsoft\Microsoft SQL Serverc.删除HKEY_LO ...

  10. （二） MySQL常用命令及语法规范