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. STA分析(四) lib model

    library中的一个cell可以是一个standard cell,IO buffer,或者一个complex IP.其中包含area,functionality,timing,power等相关的信息 ...

  2. [SQL入门级] 这篇咱'薄利多销',记录多一点

    这个系列的博文知识回顾sql知识作的记录,温故而知新.上一篇内容达不到知识分享的层级被移出园子首页,对不住各位看官,内容简单了些.下面咱就记录多一些的基础知识,薄利多销: 控制用户权限 • 创建用户 ...

  3. NOSQL学习之二:MongoDB

    MongoDB是一个高性能,开源,无模式的文档型数据库,它在许多场景下可用于替代传统的关系型数据库或键/值存储方式,是当前NoSQL数据库中比较热门的一种. MongoDB使用C++开发.不支持SQL ...

  4. tomcat启动失败问题排除及解决办法 Server Tomcat v7.0 Server at localhost failed to start.

    tomcat启动失败问题排除及解决办法 Server Tomcat v7.0 Server at localhost failed to start. 导致上面问题的原因可能有很多种,每种的解决办法都 ...

  5. java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例

    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...

  6. IT行业——Linux

    现在是21世纪,是科学技术大力发展的一个时代,IT行业已经成为现在的一个非常热门的一个行业,许许多多的人都想要往IT方面发展,找IT方面相关的一个工作.因此,现在也出现了很多IT培训机构,比如培训Li ...

  7. SNMP学习笔记之SNMP TRAP简介、流程以及使用Python实现接受Trap信息

    0x00 SNMP TRAP简介 SNMP(Simple Network Management Protocol) trap是一种很有用,但是也容易让人难以理解的协议. 虽然名字叫做简单网络管理协议, ...

  8. C++设计模式 之 “数据结构” 模式:Composite、Iterator、Chain of Resposibility

    "数据结构"模式 常常有一些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用.这时候,将这些特定数据结构封装在内部,在外部提供统一的接口, ...

  9. 05: python中的函数

    1.1 python 函数   1.函数作用 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 减少重复代码 使程序变的可扩展 使程序变得 ...

  10. linux内核分析 第5章读书笔记

    第五章 系统调用 一.与内核通信 系统调用在用户控件进程和硬件设备之间添加了一个中间层,作用有: 为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳定和安全 每个进程都运行在虚拟系统中,而在用 ...