创建简单的表单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 ...
随机推荐
- 5-servlet简介
一.servlet1.是什么:java程序来处理页面请求和响应2.实现方式: a.实现Servlet接口 b.继承HttpServlet类 3.步骤: a.创建一个java程序实现Servlet或者继 ...
- 深度学习框架PyTorch一书的学习-第三章-Tensor和autograd-1-Tensor
参考https://github.com/chenyuntc/pytorch-book/tree/v1.0 希望大家直接到上面的网址去查看代码,下面是本人的笔记 Tensor Tensor可以是一个数 ...
- pytorch例子学习——TRANSFER LEARNING TUTORIAL
参考:https://pytorch.org/tutorials/beginner/transfer_learning_tutorial.html 以下是两种主要的迁移学习场景 微调convnet : ...
- VC++6.0 add files to project 造成Visual Studio崩溃的解决方法
1.下载filetool.exe,然后将文件解压在一个小文件夹内2.打开filetool.dsw 在release模式下编译程序,复制filetool.dll3.放在VC6.0安装目录AddIns的下 ...
- WPF Binding学习(四) 绑定各种数据源
转自:http://blog.csdn.net/lisenyang/article/details/18312199 1.集合作为数据源 首先我们先创建一个模型类 public class Stude ...
- Spring使用MappingJackson2MessageConverter发送接收ActiveMQ消息
一.Spring使用JmsTemplate简化对JMS的访问 在JAVA对JMS队列访问中,使用默认的JMS支持将存在大量的检查型异常.通过Spring的支持,可以将所有的JMS的检查型异常转换为运行 ...
- 快速导入导出Oracle数据demo(sqlldr、UTL_FILE)
本文演示快速sqlldr导入.UTL_FILE导出Oracle表数据实例 表结构如下,演示数据约112万,可自行准备. create table MemberPointDemo ( MEMBERID ...
- vue prop 传递数据
prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 一个组件默认可以拥有任意数量的 p ...
- itoa函数实现
1. 整数字符转化为字符串数 // 将整数转换成字符串数,不用函数itoa // 思路:采用加'0',然后在逆序的方法 #include <iostream> using nam ...
- python中Metaclass的理解
今天在学习<python3爬虫开发实战>中看到这样一段代码3 class ProxyMetaclass(type): def __new__(cls, name, bases, attrs ...