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. sql server针对字符串型数字排序(针对此字符串的长度不一致)

    对于不规则的字符串数字排序,无法按照数字大的大小排序的原因是,字符串数字在数据库中按照ASCII码排序,从字符的第一个数字对比,首先就会将为首个数字相同的排在一起,在从这些字符串里面对比第二个数字,如 ...

  2. svn提交更新代码提示Please execute the 'Cleanup' command 的解决办法

    那可能是提交或更新代码的过程意外终止,第二次提交或更新会报这个错误 更新或上传的时候动作没有完成,导致本地存在锁定状态没有释放 或者有文件正在更新或上传,该文件夹被锁定. 解决办法: 将对应文件夹里的 ...

  3. python3练习100题——040

    原题链接:http://www.runoob.com/python/python-exercise-example40.html 题目:将一个数组逆序输出. a=[1,2,3,4,5] print a ...

  4. pandas玩转excel-> (2)如何利用pandas读取excel数据文件

    import pandas as pd #将excel文件读到内存中,形成dataframe,并命名为peoplepeople=pd.read_excel('D:/python结果/task2/Peo ...

  5. javascript初学笔记

    基本语句 赋值条件循环语句 javascript异常处理语句 trycatchfinally语句 Error对象 throw语句 函数 定义 调用 嵌套函数 函数的嵌套定义 内置函数 匿名函数和Fun ...

  6. 【Unity|C#】基础篇(13)——特性(Attribute)

    [学习资料] <C#图解教程>(第24章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...

  7. 软件工程概论,java web项目

    需要网站系统开发需要掌握的技术: 实施Java的WEB项目需要掌握的技术如:面向对象分析设计思想,设计模式和框架结构,XML语言,网页脚本语言,数据库,应用服务器,集成开发环境Java语言是完全面向对 ...

  8. 0002 PyCharm设置

    1 设置编码格式 File/Settings/Editor/File Encodings 2 设置字体 File/Settings/Editor/Font 3 鼠标滚轮改变编辑器字体大小 File/S ...

  9. ubuntu set up 2 - 双系统时间问题

    http://ubuntuhandbook.org/index.php/2016/05/time-differences-ubuntu-1604-windows-10/ For users who d ...

  10. 判断是否网络连通 .net Ping

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...