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. Linux的语系的修改

    1. 显示目前所支持的语系 [root@test ~]# echo $LANG 2. 修改语系成为英文语系 字体集目录:"/etc/sysconfig/i18n",编辑该文件,将字 ...

  2. ArcGISServer发布流程

    发布数据服务 在进行WebGIS开发中,地图显示的内容可以分成两类:一类是底图,或者是矢量的世界地图.中国地图.某个地区的底图:另一类就是业务图,对于用于遥感数据发布的WebGIS应用就是遥感影像的边 ...

  3. “/Reports”应用程序中的服务器错误。

    “/Reports”应用程序中的服务器错误. ----------------------------------------------------------------------------- ...

  4. python3练习100题——044

    41-43讲关于python的变量范围,没有什么别的内容,我删除了. 原题链接:http://www.runoob.com/python/python-exercise-example44.html ...

  5. vue常用插件之打印功能、二维码插件、批量打印二维码

    vue实现打印的两种方法 vue实现批量打印二维码 (需安装二维码插件qrcodejs2) 一.vue-print-nb插件 1.安装: npm i vue-print-nb -S 2.全局注册(ma ...

  6. url编码--url中含有空格问题

    开发web服务中,发现当url中含有空格时,会报 400 error: bad request sytanx,经分析,url中含有特殊字符时,服务端可能无法识别.如+,空格,/,?,%,#,& ...

  7. PWA - 整体(未完)

    渐进式 Web 应用(PWA) 运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序. PWA 的优势 可被发现 易安装 manifest(https://develop ...

  8. java8的ConcurrentHashMap为何放弃分段锁,为什么要使用CAS+Synchronized取代Segment+ReentrantLock

    原文地址:https://cloud.tencent.com/developer/article/1509556 推荐一篇 ConcurrentHashMap 和 HashMap 写的比较的的文章 j ...

  9. [HNOI2013] 消毒 - 二分图匹配

    容易发现 \(a,b,c\) 中至少有一个 \(\leq 17\) 不妨将其调剂为 \(a\),那么我们可以暴力枚举哪些 \(x\) 片片要被直接削掉,剩下的拍扁成二维情况 二维时,如果有一个格子是 ...

  10. js报错 Uncaught TypeError: xxxx.each is not a function

    在处理ajax返回的json数组时错误的使用了 list.each(function(){ }); 实际上当遍历json数组是应该使用 $.each(list,function(index,cours ...