html form表单

仅供学习,转载请注明出处

form表单

表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

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>标签配合,定义下拉表单元素中的选项

注册表单实例:

<!DOCTYPE html>
<html>
 <head> 
  <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类型为submit定义提交按钮  
             还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
             <input type="image" src="xxx.gif">
        --> <input type="reset" name="" value="重置" /> </p> 
  </form>  
 </body>
</html>

浏览器展示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 协程并发下载斗鱼美女图片

    作为爬虫技术第一步,就是可以使用爬取下载图片作为示例。 那么爬取图片,我们肯定去爬取美女图片作为第一步操作示例呀。 那么下面一个最重要的工作。 什么是最重...

    Devops海洋的渔夫
  • Redis 数据结构之hash类型

    Devops海洋的渔夫
  • 50. Vue名称案例-使用keyup事件监听

    在日常开发中,经常会有计算或者拼接输入框内容,然后在另一个输入框呈现的场景,例如:计算器、拼接名称等等。

    Devops海洋的渔夫
  • 三天学会HTML5 之第一天

    引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。 首先了解一些基本的术语和概念。 SGML, ...

    葡萄城控件
  • radio与checkbox

    最近一直在学习Javascript与asp.net MVC4,每天都在跟着书学习。这样总感觉自己看的很抽象,没有点实际的意义。而且,每次看的东西很容易忘记,所以...

    水击三千
  • JavaWeb——HTML表单标签详解(input、label、select、textarea)

    表单,是用于采集用户输入数据的,用于和服务器进行交互。比如登录系统,使用的标签是form,可以定义一个范围,范围代表采集用户数据的范围,表单中的数据要想被提交,...

    Winter_world
  • Struts2的配置

    1.IntelliJ自动生成的web.xml中filter-class报错,是因为Struts2-2.5版本修改了

    用户3112896
  • Struts2笔记

    c、在应用的构建路径的顶端(WEB-INF\classes),建立struts2的配置文件。默认文件名struts.xml

    HUC思梦
  • Struts2学习之环境搭建

    我使用的MyEclipse开发工具,之前在学DRP时用的是Eclipse,用起来不是很方便(对我而言),因此又专门下载一个MyEclipse来,这个使用起来确实...

    the5fire
  • Struts2 默认Action和模块包含

    在我们定义Action的时候会希望有一个默认的action在写错action时或者不写action时不至于报错 这里我只写一个简单的strut.xml例子 <?...

    lpxxn

扫码关注云+社区

领取腾讯云代金券