<!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. 007_Python中的__init__，__call__，__new__

    __init__函数 当一个类实例被创建时, __init__() 方法会自动执行,在类实例创建完毕后执行,类似构建函数.__init__() 可以被当成构建函数,不过不象其它语言中的构建函数,它并不 ...

  2. geth工作运行程序转后台

    今天查看了一下运行程序怎么转后台,然后就发现了之前写的脚本一定要进行console控制台然后在解锁coinbase,然后才手动挖矿的操作真的是太笨了,后面研究了一下,发现是可以在运行语句上进行操作的: ...

  3. 原生js学习 选择dom

    连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...

  4. face recognition[variations of softmax][ArcFace]

    本文来自<ArcFace: Additive Angular Margin Loss for Deep Face Recognition>,时间线为2018年1月.是洞见的作品,一作目前在 ...

  5. CF434D Nanami's Power Plant 最小割

    传送门 因为连距离限制的边的细节调了贼久QAQ 这个题和HNOI2013 切糕性质相同,都是有距离限制的最小割问题 对于每一个函数,用一条链记录变量\(x\)在不同取值下这个函数的贡献.对于一个\(x ...

  6. Elicpse使用技巧-打开选中文件文件夹或者包的当前目录

    很多时候,我们需要在eclipse那里打开选中文件(文件夹,包)的当前目录,在资源管理器那里显示这个目录,这个时候,我们又不想采用“选中文件/文件夹/包名--右击--Properties--Locat ...

  7. FineUIMvc随笔（2）怎样在控件中嵌套 HTML

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 有网友在<FineUI总群1>问这么一个问题:怎么把 HTML 嵌套在控件中? 这是很多刚学习 FineU ...

  8. 使用 IIS 在 Windows 上托管 ASP.NET Core2.0

    准备: 操作系统:Windows Server 2008 R2 或更高版本 开发环境:VS2017 第一步:新建项目ASP.NET Core Web应用程序 在 Visual Studio 中,选择“ ...

  9. Python-time模块-58

    time 模块: Eva_J import time time.sleep(100) #时间睡眠 print(time.time()) #返回一个以秒为单位的时间 时间模块 和时间有关系的我们就要用到 ...

  10. Python-类与对象

    类与对象的概念 类即类别.种类,是面向对象设计最重要的概念,从一小节我们得知对象是特征与技能的结合体,而类则是一系列对象相似的特征与技能的结合体. 那么问题来了,先有的一个个具体存在的对象(比如一个具 ...