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 表单学习的更多相关文章

  1. HTML表单学习

    HTML表单学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...

  2. Html学习之十七(表格与表单学习--排行版制作)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Html学习之十八(表格与表单学习--统计表制作)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5表单学习笔记

    表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. Form表单学习网站

    HTML表单 -- form标签 -- 与浏览者交互:http://www.dreamdu.com/xhtml/tag_form/

  7. html表单---学习笔记03

    第8章 表单 8.1 表单标记<form> <form name="表单名称" method="提交方法" action="处理程序 ...

  8. Django Form表单学习总结

    Form中添加自定义的验证:    1.对特定字段属性的验证;    2.包含多字段的验证. 先创建一个简单的Form: from django import forms class ContactF ...

  9. 24.form表单提交的六种方式

    form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...

随机推荐

  1. 【pwnable.kr】 [simple login]

    Download : http://pwnable.kr/bin/login Running at : nc pwnable.kr 9003 先看看ida里面的逻辑. 比较重要的信息时input变量再 ...

  2. Solr查询和过滤器执行顺序剖析

    一.简介 Solr的搜索主要由两个操作组成:找到与请求参数相匹配的文档:对这些文档进行排序,返回最相关的匹配文档.默认情况下,文档根据相关度进行排序.这意味着,找到匹配的文档集之后,需要另一个操作来计 ...

  3. wdcp升级php5.8到php7.1.12后安装swoole

    http://pecl.php.net/package/swoole wget http://pecl.php.net/get/swoole-4.0.1.tgztar zxvf swoole-4.0. ...

  4. 054、Java中使用for循环第二种写法实现1~100的累加

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  5. 004.CI4框架CodeIgniter, 配置mysql数据库,并进行数据库查询

    01.在app的Config目录的Database文件里面填写数据库配置,并把pConnect设置成true,此处为一直连接mysql数据库 02.在Models中,创建一个System目录,再在Sy ...

  6. 001.Oracle数据库 , 查询日期在两者之间

    /*Oracle数据库查询日期在两者之间*/ SELECT OCCUR_DATE FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date( '2017-05- ...

  7. http https 干货

    HTTPS原理  在谈HTTPS原理之前,首先了解一下Http和Https的区别.     Http(全称:Hyper Text Transfer Protocol),一般称为超文本传输协议,也是互联 ...

  8. yolov3测试自己的数据

    yolov3测试自己的数据 前言 上一篇我已经介绍了利用yolov3预训练权重文件(只包含卷积层)并训练 只需要进行如下编译: ./darknet detector train cfg/voc.dat ...

  9. openssl生成CA签署 及 加密解密基础

    openssl  生成私有CA 及签署证书 openssl 配置文件: /etc/pki/tls/openssl.cnf 1. 在openssl CA 服务器端生成私钥 cd /etc/pki/CA/ ...

  10. Golang的单目(一元)运算符-地址操作符和接收操作符

    Golang的单目(一元)运算符-地址操作符和接收操作符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Golang的单目(一元)运算符概述 常见的地址操作符: &: ...