创建简单的表单Demo
<!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的更多相关文章
- js 创建简单的表单同步验证器
SyncValidate declare const uni: any; export interface SyncValidateOpt { [key: string]: SyncValidateF ...
- IDEA插件开发（一）一个简单的表单demo
- 【java学习】Servlet简单的表单程序(一)
此文用于java学习,在此小记. 在此小Demo中使用到了Servlet,所以有必要了解一下Servlet的相关知识.(Servlet的相关知识摘抄自http://blog.csdn.net/jiuq ...
- [WPF自定义控件库]简单的表单布局控件
1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...
- Struts2之Action三种接收参数形式与简单的表单验证
有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...
- Maven web项目(简单的表单提交) 搭建(eclipse)
我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- 带有两个输入字段和相关标记的简单 HTML 表单：
带有两个输入字段和相关标记的简单 HTML 表单: 意思就是说Male 和id="male"绑定在一起. <html> <body> <p> ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
随机推荐
- 【js】使用javascript 实现静态网页分页效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...
- CF341D Iahub and Xors
CF341D Iahub and Xors 给定一个 \(n\times n\) 的矩阵,平面异或,求平面异或和 \((n\leq10^3,\ m\leq10^5)\) 树状数组 这里主要是记录一下板 ...
- 深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)
events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中 ...
- 长期招收linux驱动工程师
公司:宝存科技 工作内容: 1.负责企业级ssd的feature设计和开发工作 2.负责ftl算法的设计及开发 3.排查客户问题 任职要求: 1.精通C语言 2.熟练掌握linux操作系统使用 3.熟 ...
- pip install报错Can't roll back cryptography; was not uninstalled
当使用pip install或者pip install --upgrade报错 Can't roll back cryptography; was not uninstalled 可以进行以下的尝试: ...
- OM1、OM2、OM3和OM4光纤之间的区别
“OM”stand for optical multi-mode,即光模式,是多模光纤表示光纤等级的标准.不同等级传输时的带宽和最大距离不同,从以下几个方面分析它们之间的区别. 一.OM1.OM2. ...
- python三：循环语句练习--小白博客
# 打印0-10去掉5 count = - : count += : continue print(count) # 打印0-10的偶数 count = : print(count) count+= ...
- 牛客国庆集训派对Day2
题目链接:https://www.nowcoder.com/acm/contest/202/A A 题意:给出最大4096*64和64*4096的矩阵,其中有一个矩阵只含有0和1,问你它们相乘所得到得 ...
- PS打造油画般的风景人像
- Python_阻塞IO、非阻塞IO、IO多路复用
0.承上 进程: 计算机里最小的资源分配单位: 数据隔离, 利用多核,数据不安全. 线程: 计算机中最小的CPU调度单位: 数据共享,GIL锁,数据不安全. 协程: 线程的一部分,是有用户来调度的; ...