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. mysql表结构文件

  2. jq table页二级联动

    <div class="layerRtb layerRtb-threecolumn"> <div class="clearfix layerRtb-he ...

  3. 手撕vue-cli配置——webpack.dev.conf.js篇

    const utils = require('./utils') const webpack = require('webpack') const config = require('../confi ...

  4. mysql的数据类型和字符集

    MySQL的数据类型 MySQL数据库支持的数据类型主要有以下几种: 整型 浮点型 字符 BLOB型 枚举和集合类型 JSON类型(MySQL5.7新增加的支持) 整型 整数类型是数据库中最基本的数据 ...

  5. Win10 Ubuntu 双系统 卸载 Ubuntu

    Win10 Ubuntu 双系统 卸载 Ubuntu 其实卸载 Ubuntu 系统很简单,进 win10 系统之后,磁盘管理,格式化 Ubuntu 的磁盘就可以了. 但是最费劲的是什么呢? 就是格式化 ...

  6. 20145206邹京儒Exp6 信息搜集与漏洞扫描

    20145206邹京儒Exp6 信息搜集与漏洞扫描 一.实践过程记录 openvas漏洞扫描 1.openvas-check-setup来查看下他的安装状态: 如下图所示:在步骤7中出现错误,显示需要 ...

  7. msf辅助模块的应用——20145301

    msf辅助模块的应用 实验步骤 创建msf所需的数据库 service postgresql start msfdb start 开启msf,输入命令 use auxiliary/scanner/di ...

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

    天气客户端开发报告 1    系统需求分析 1.1功能性需求分析 天气预报客户端,最基本就是为用户提供准确的天气预报信息.天气查询结果有两种:一种是当天天气信息,信息结果比较详细,除温度.天气状况外还 ...

  9. 零碎知识点 telnet操作IMAP查看邮件

    1.用SQL语句查找出字符型字段内的最大值 select max(cast(字段 as int)) from 表 注:因为数据库是按字符比较的,10,9.因为9比1大,而只要有一位数字大,10后面就不 ...

  10. linux下安装evernote国际版

    一.背景 由于之前一直将笔记记录在evernote,因此现在转到linux下需要使用工具来记录笔记到evernote上 OS : Ubuntu 16.04 (xenial) 二.linux版everp ...