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. 错误 CS8107 C# 7.0 中不支持功能“xxxxxx”。请使用 7.1 或更高的语言版本。

    解决方法:项目右键属性 —> 生成 —> 找到最下面的高级按钮,点击高级按钮 —> 常规 —> 语言版本 —> 选择 C#最新次要版本,或者比当前版本更高的版本即可,点击 ...

  2. qsort 与sort 对结构体排序实例

    qsort 与sort 对结构体排序实例 #include<bits/stdc++.h> using namespace std; typedef struct { string book ...

  3. UVa 12050 - Palindrome Numbers (回文数)

    A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example, th ...

  4. c++ 踩坑大法好 枚举

    1,枚举是个啥? c++允许程序员创建自己的数据类型,枚举数据类型是程序员自定义的一种数据类型,其值是一组命名整数常量. ,wed,thu,fri,sat,sun}; //定义一个叫day的数据类型, ...

  5. 使用Vue创建一个新项目

    1.环境 保证已经安装好了node\npm\vue等工具,将路径设置为想要建立新项目的文件夹路径 2.关于npm与cnpm npm包管理器,是集成在node中的,node环境安装完成,npm包管理器也 ...

  6. C++-POJ1995-Raising Modulo Numbers[快速幂]

    #include <cstdio> typedef long long ll; int quick_pow(ll a,ll b,ll mod){ ll ans=; ))ans=(ans*a ...

  7. 1.spring源码-BeanPostProcessor后置处理器

    1.BeanPostProcessor接口的介绍: BeanPostProcessor是一个接口,其中有两个方法,postProcessBeforeInitialization和postProcess ...

  8. python数据赋值后,修改新数据,原数据如何保证不被修改?

    python中对象,赋值后是同一地址,如果是可变对象,对其中一个修改会影响到另一个,如果要生成完全新的对象,应使用deepcopyimport copydata1=copy.deepcopy(data ...

  9. 服务器上搭建使用SSH账户登录的Git仓库

    1.安装git yum install -y git 2.创建git仓库保存的目录 mkdir /data/git_repo 3.初始化空仓库 cd /data/git_repogit init -- ...

  10. 【Python】遍历循环