HTML 表单用于收集不同类型的用户输入。

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

密码字段

密码字段通过标签<input type="password"> 来定义:

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
username:<input type="text" name="firstname"><br>
password:<input type="password" name="lastname"><br>
Sex:<input type="radio" name="sex" value="man">Man
    <input type="radio" name="sex" value="woman">Woman<br>
Interest:<br><input type="checkbox" name="interest" value="football">football<br>
         <input type="checkbox" name="interest" value="basketball">basketball<br>
         <input type="checkbox" name="interest" value="eat">eat<br>
    <input type="submit" value="提交">
</form>

username:
password:
Sex:Man
Woman
Interest:
football
basketball
eat

HTML学习(14)表单的更多相关文章

  1. bootstrap基础学习【表单含按钮】(二)

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

  2. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  3. 学习W3SCHOOL 表单验证

    //表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

  4. SpringMVC学习系列- 表单验证

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  5. php学习笔记——表单

    13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...

  6. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  7. JavaWeb学习日记----表单提交方式

    1.表单提交方式 (1) 使用input控件中的submit提交 代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  8. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...

  9. Bootstrap学习-排版-表单

    1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...

  10. JavaScript高级程序设计学习笔记--表单脚本

    提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit" ...

随机推荐

  1. 为什么重写equals方法,还必须要重写hashcode方法

    一.equals方法和hashcode的关系 根据Object.hashCode的通用约定: 如果两个对象相同(equals方法返回true),那么hashcode也相等.(图1) 如果两个对象的ha ...

  2. linux c++调试日志函数

    #ifndef MYLOG_H #define MYLOG_H #include <stdio.h> #define __DEBUG__ #ifdef __DEBUG__ #define ...

  3. Struts2-057远程代码执行漏洞(s2-057/CVE-2018-11776)复现

    参考了大佬的链接:https://github.com/jas502n/St2-057 00x01前言 Apache Struts是美国阿帕奇(Apache)软件基金会负责维护的一个开源项目,是一套用 ...

  4. 阿里云Linux服务器安装Redis 完整步骤(包括处理远程连接问题)

    跟随本篇文章步骤,包你成功安装并连接使用. 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 tar ...

  5. loj6277 数列分块入门题1

    裸题分块. #include <bits/stdc++.h> using namespace std; ],b[],n,m,t1,t2,t3,t4,sq; int main(){ ios: ...

  6. Spring Boot整合Freemarker

    一.首先导入依赖 <!-- 添加freemarker模版的依赖 --> <dependency>     <groupId>org.springframework. ...

  7. angular2 给下拉框动态赋值

    html页中 其中aab是从后台获取的动态数据

  8. Tensorflow中one_hot() 函数用法

    官网默认定义如下: one_hot(indices, depth, on_value=None, off_value=None, axis=None, dtype=None, name=None) 该 ...

  9. 网易云信融合CDN方案及实践

    日前,网易云信视频云架构师席智勇在第七届GFIC全球家庭互联网大会进行了题为<网易云信融合CDN方案及实践>的分享,以下是演讲内容回顾. 图为 网易云信视频云架构师席智勇 CDN所面临的问 ...

  10. PLSQL官网下载地址

    记录一下 https://www.allroundautomations.com/registered/plsqldev.html