<!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. Python：Day55 ORM多表操作

    命令行创建UTF8数据库: CREATE DATABASE 数据库名称 DEFAULT CHARSET utf8 COLLATE utf8_general_ci; 创建多表(外键)

  2. 仿照wtform自定义Form组件

    仿照wtforms自定义Form组件 1.wtforms 点击查看源码分析及使用方法 2.自定义Form组件 #!usr/bin/env python # -*- coding:utf-8 -*- f ...

  3. 机器学习三剑客之Matplotlib基本操作

    Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形  . 通过 Matplotlib,可以仅需要几行代码,便可以生成绘图,线型图, ...

  4. UITableView的编辑操作

    继续上篇UITableView和UITableViewController, 打开BNRItemsViewController.m,在类扩展中添加如下属性: @property (nonatomic, ...

  5. 广师大python学习笔记求派的值

    用python语言算π值并且带有进度条 用python算圆周率π 1.准备第三方库pip 2.利用马青公式求π 3.用python语言编写出求圆周率到任意位的程序如下: from math impor ...

  6. Apache Spark 2.2.0新特性介绍（转载）

    这个版本是 Structured Streaming 的一个重要里程碑,因为其终于可以正式在生产环境中使用,实验标签(experimental tag)已经被移除.在流系统中支持对任意状态进行操作:A ...

  7. [翻译] ASP.NET Core 2.1.0 发布

    原文: ASP.NET Core 2.1.0 now available 今天,我们很高兴可以发布 ASP.NET Core 2.1.0!这是我们 .NET平台下开源的.跨平台的 Web 框架的最新版 ...

  8. C#中存储数据的集合：数组、集合、泛型、字典

    为什么把这4个东西放在一起来说,因为c#中的这4个对象都是用来存储数据的集合……. 首先咱们把这4个对象都声明并实例化一下: //数组 ]; //集合 ArrayList m_AList = new ...

  9. MVC简单用户登录授权认证

    1.控制器上面用 [Authorize] 属性标识,表示当前控制器内的所有函数需要用户认证才能访问 2.函数上面用 [AllowAnonymous] 属性标识,表示当前函数不需要用户认证可以直接访问 ...

  10. flask登录插件 flask-login

    Flask-Login为Flask提供了用户会话管理,它处理了日常的登入登出且长时间记住用户的会话 使用: 1.配置,初始化 LoginManager 创建实例 loginManger = Login ...