<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <form action="http://www..." method="get">

 <p>

 <label>姓名：</label><input type="text" name="username" />

 </p>

 <p>

 <label>密码：</label><input type="password" name="password" />

 </p>

 <p>

 <label>性别：</label>

 <input type="radio" name="gender" value="0" /> 男

 <input type="radio" name="gender" value="1" /> 女

 </p>

 <p>

 <label>爱好：</label>

 <input type="checkbox" name="like" value="sing" /> 唱歌

 <input type="checkbox" name="like" value="run" /> 跑步

 <input type="checkbox" name="like" value="swiming" /> 游泳

 </p>

 <p>

 <label>照片：</label>

 <input type="file" name="person_pic">

 </p>

 <p>

 <label>个人描述：</label>

 <textarea name="about"></textarea>

 </p>

 <p>

 <label>籍贯：</label>

 <select name="site">

     <option value="0">北京</option>

     <option value="1">上海</option>

     <option value="2">广州</option>

     <option value="3">深圳</option>

 </select>

 </p>

 <p>

 <input type="submit" name="" value="提交">

 <input type="reset" name="" value="重置">

 </p>

 </form>

 </body>

 </html>

Demo Code

页面效果如下：

Title

姓名：

密码：

性别： 男 女

爱好： 唱歌 跑步 游泳

照片：

个人描述：

籍贯：
北京
上海
广州
深圳

表单应用概解：

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签 定义整体的表单区域

  • action属性 定义表单数据提交地址
  • method属性 定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

  • type属性

    • type="text" 定义单行文本输入框
    • type="password" 定义密码输入框
    • type="radio" 定义单选框
    • type="checkbox" 定义复选框
    • type="file" 定义上传文件
    • type="submit" 定义提交按钮
    • type="reset" 定义重置按钮
    • type="button" 定义一个普通按钮
    • type="hidden" 定义一个隐藏的表单域，用来存储值
  • value属性 定义表单元素的值
  • name属性 定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

创建简单的表单Demo的更多相关文章

  1. js 创建简单的表单同步验证器

    SyncValidate declare const uni: any; export interface SyncValidateOpt { [key: string]: SyncValidateF ...

  2. IDEA插件开发（一）一个简单的表单demo

  3. 【java学习】Servlet简单的表单程序(一)

    此文用于java学习,在此小记. 在此小Demo中使用到了Servlet,所以有必要了解一下Servlet的相关知识.(Servlet的相关知识摘抄自http://blog.csdn.net/jiuq ...

  4. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  5. Struts2之Action三种接收参数形式与简单的表单验证

    有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...

  6. Maven web项目(简单的表单提交) 搭建(eclipse)

    我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...

  7. 简单js表单验证

     简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...

  8. 带有两个输入字段和相关标记的简单 HTML 表单：

    带有两个输入字段和相关标记的简单 HTML 表单: 意思就是说Male 和id="male"绑定在一起. <html> <body>   <p> ...

  9. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

随机推荐

  1. <计算机网络>运输层

    端口号:通常在一台主机上运行多个网络应用程序,IP地址标识一台主机,而端口号标识特定的进程.端口是一个16bits的数,其大小在0-65535之间.0-1023之间的端口号叫做周知端口号 套接字:从网 ...

  2. 20175310 《Java程序设计》第6周学习总结

    20175310 <Java程序设计>第6周学习总结 本周博客: <20175310 类定义 - 20175310xcy - 博客园 >https://www.cnblogs. ...

  3. 深入理解koa中的co源码

    阅读目录 一:理解Generator 二:理解js函数柯里化 三:理解Thunk函数 四:理解CO源码 回到顶部 一:理解Generator 在看co源码之前,我们先来理解下Generator函数.G ...

  4. 条件随机场Conditional Random Field-CRF入门级理解

    条件随机场Conditional Random Field-CRF入门级理解   有向图与无向图模型 CRF模型是一个无向概率图模型,更宽泛地说,它是一个概率图模型.现实世界的一些问题可以用概率图模型 ...

  5. .net core 简单项目的创建

    1.linux 安装net coref https://www.microsoft.com/net/learn/get-started/linuxubuntu 2.创建目录 2.创建控制台项目 第一次 ...

  6. Java性能优化之String字符串优化

    字符串是软件开发中最重要的对象之一.通常,字符串对象在内存中是占据了最大的空间块,因此如何高效地处理字符串,必将是提高整体性能的关键所在. 1.字符串对象及其特点 Java中八大基本数据类型没有Str ...

  7. 缓存子系统如何设计(Cachable tag, Memcache/redis support, xml config support, LRU/LFU/本地缓存命中率)

    大家对这段代码肯定很熟悉吧: public List<UserInfo> SearchUsers(string userName) { string cacheKey=string.For ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（92）-打印EasyUI 的datagrid表格

    前言 应用系统有时候需要打印Datagrid的表格内容,我们本节就来学习打印datagrid内容 打印主要使用:web打印(我们之前有讲过web打印插件jqprint) + 将datagrid重新编制 ...

  9. 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  10. koa文件上传中间件——koa-multer

    koa-multer用法基本和multer一致,npm里koa-multer的用法介绍比较简单,可以参考multer的用法 const Koa = require('koa'); const Rout ...