<!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. i春秋-百度杯十月场-vld

    查看源码,有提示,index.php.txt  ,  进入得到文本. 不太看得懂,后来百度,大致就是,flag1=.......&flag2=......&flag3=...... , ...

  2. python：利用logbook模块管理日志

    日志管理作为软件项目的通用部分,无论是开发还是自动化测试过程中,都显得尤为重要. 最初是打算利用python的logging模块来管理日志的,后来看了些github及其他人的自动化框架设计,做了个比对 ...

  3. 给ubuntu换内核

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 下载内核源码 有两种方式,一种方式是直接从官网:https://www.kernel.org/直接下载,另一种方 ...

  4. hackbar增强版 & 在Firefox上安装未通过验证的扩展

    hackbar是Firefox的经典插件之一.介绍如下(懒得翻译了) This toolbar will help you in testing sql injections, XSS holes a ...

  5. A2dp sink 初始化流程源码分析

    A2dp sink的初始化流程和A2dp 的初始化流程,基本一样,这里做简单分析.这里分析的android的版本是Android O. 我们先从service的启动说起吧. 下面 是启动的时候的log ...

  6. mybatis 多个接口参数的注解使用方式（@Param)

    目录 1 简介 1.1 单参数 1.2 多参数 2 多个接口参数的两种使用方式 2.1 Map 方法(不推荐) 2.1.1 创建接口方法 2.1.2 配置对应的SQL 2.1.3 调用 2.2 @Pa ...

  7. .net core实践系列之短信服务-架构优化

    前言 通过前面的几篇文章,讲解了一个短信服务的架构设计与实现.然而初始方案并非100%完美的,我们仍可以对该架构做一些优化与调整. 同时我也希望通过这篇文章与大家分享一下,我的架构设计理念. 源码地址 ...

  8. Linux stress 命令

    stress 命令主要用来模拟系统负载较高时的场景,本文介绍其基本用法.文中 demo 的演示环境为 ubuntu 18.04. 基本语法 语法格式:stress <options> 常用 ...

  9. Python容器

    列表 list 1.列表的格式为,把值放入[ ]中 >>> lis = ['a', 1, ['a', 'c', 1]] 2.列表中可以嵌套任何类型 索引 因为列表是有序的,那么我们可 ...

  10. PS调出冷绿色电影画面风格

    原图 一.按照惯例先磨皮,我修照片的习惯是,先拉一层色阶,使直方图平均分配,画面会显得没那么灰,当然,这只是个人喜好,先加后加都没所谓. 二.由于脸部的亮度不够,显得有点脏.所以这一步主要是通过拉曲线 ...