18 12 24 html 表单学习
html表单
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
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="image" 定义图片作为提交按钮,用src属性定义图片地址
- type="hidden" 定义一个隐藏的表单域,用来存储值
- value属性 定义表单元素的值
- name属性 定义表单元素的名称,此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项
<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类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
<input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>
18 12 24 html 表单学习的更多相关文章
- HTML表单学习
HTML表单学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...
- Html学习之十七(表格与表单学习--排行版制作)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Html学习之十八(表格与表单学习--统计表制作)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5表单学习笔记
表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...
- 12、Struts2表单重复提交
什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...
- Form表单学习网站
HTML表单 -- form标签 -- 与浏览者交互:http://www.dreamdu.com/xhtml/tag_form/
- html表单---学习笔记03
第8章 表单 8.1 表单标记<form> <form name="表单名称" method="提交方法" action="处理程序 ...
- Django Form表单学习总结
Form中添加自定义的验证: 1.对特定字段属性的验证; 2.包含多字段的验证. 先创建一个简单的Form: from django import forms class ContactF ...
- 24.form表单提交的六种方式
form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...
随机推荐
- 关于dom树
当用户访问ip地址,比如 ==www. aa .com/bb/cc/dd.html== 正常情况下是访问一个叫aa.com的服务器里的bb文件夹里的cc文件夹里的dd.html这个文件(其实很多情况都 ...
- javascript判断数组是否包含了指定的元素
jQuery写法: var arr = [ "xml", "html", "css", "js" ]; $.inArra ...
- PIP无法使用,script文件夹为空解决
[问题]环境变量已配置,但pip.pip3无法使用,且script文件夹为空解决: 一.安装pip3 python -m ensurepip 运行完之后就pip3有了: 二.安装pip python ...
- 154. 寻找旋转排序数组中的最小值 II
转跳点:--\(˙<>˙)/-- 原本打算大年三十十一起写完的,结果这篇拖到了年初一…… 这道题比刚刚那道,麻烦一点,因为有重复,所以我们需要考虑重复的情况,就是刚刚的两种情况变成了三种: ...
- CentOS7基于http方式搭建本地yum源
1.创建yum软件保存目录[root@localhost ~]# mkdir -p /www/share/yum 2. 修改yum配置文件先备份yum配置文件,修改yum配置文件中yum软件包保存目录 ...
- 操作数据库的SqlHelper类
public static class SqlHelper { public static readonly string connstr = ConfigurationManager.Connect ...
- 基于高德开放平台Map Lab的数据可视化
在Map Lab上创建可视化项目,首先需要添加数据.添加数据有4种方式,分别是: 上传CSV文件添加数据 上传Excel文件添加数据 连接在线数据库添加数据 提供在线数据API添加数据 一.数据上传说 ...
- .nerCore-RabbitMQDemo消息队列
1.定义:MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.MQ是消费- ...
- python 求两个数的最大公约数
给定两个整数a,b,求他们的最大公约数 def gcd(a,b): if a<b: a,b=b,a while(a%b != 0): c = a%b a=b b=c return b a,b = ...
- 第三节MapStruct翻译--Defining a mapper
第三节MapStruct--Defining a mapper 在这一章节你将学到如何用mapstruct和它的一些必要的操作选项来定义一个bean mapper. 3.1 Basic mapping ...