<!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. 003_webpack 配合babel 将es6转成es5

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack - ...

  2. 深度学习框架PyTorch一书的学习-第四章-神经网络工具箱nn

    参考https://github.com/chenyuntc/pytorch-book/tree/v1.0 希望大家直接到上面的网址去查看代码,下面是本人的笔记 本章介绍的nn模块是构建与autogr ...

  3. syzkaller 资料集合

    搭建 1.Setup: Ubuntu host, QEMU vm, x86-64 kernel https://github.com/google/syzkaller/blob/master/docs ...

  4. Generative Adversarial Nets[iGAN]

    本文来自<Generative Visual Manipulation on the Natural Image Manifold>,是大神Jun-Yan Zhu在2016年9月的作品. ...

  5. Java调用FFmpeg进行视频处理及Builder设计模式的应用

    1.FFmpeg是什么 FFmpeg(https://www.ffmpeg.org)是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它用来干吗呢?视频采集.视频格式转化.视频 ...

  6. 搭建SpringBoot+dubbo+zookeeper+maven框架（四）

    今天我们完成框架的thymeleaf模板显示页面功能,页面的用户登陆,密码的AES加密解密,输错3次进行验证码验证功能,东西可能比较多,这个是我这两天在网上结合各种资源整合出来的,基本功能都已经实现, ...

  7. .NET/C# 异常处理：写一个空的 try 块代码，而把重要代码写到 finally 中

    不知你是否见过 try { } finally { } 代码中,try 块留空,而只往 finally 中写代码的情况呢?这种写法有其特殊的目的. 本文就来说说这种不一样的写法. 你可以点开这个链接查 ...

  8. 第一行代码：以太坊（2）-使用Solidity语言开发和测试智能合约

    智能合约是以太坊的核心之一,用户可以利用智能合约实现更灵活的代币以及其他DApp.不过在深入讲解如何开发智能合约之前,需要先介绍一下以太坊中用于开发智能合约的Solidity语言,以及相关的开发和测试 ...

  9. 【开源】小程序、小游戏和Web运动引擎 to2to 发布

    简单轻量跨平台的 Javascript 运动引擎 Github → https://github.com/dntzhang/cax/tree/master/packages/to Simple DEM ...

  10. Leetcode 686 Repeated String Match

    Given two strings A and B, find the minimum number of times A has to be repeated such that B is a su ...