表单<form>(块元素)

表单的概念：表单主要用来获取用户数据（信息），如：注册表单，
查询表单，登录表单。
表单的工作原理：
浏览有表单的网页，填写一些必要的信息，然后点击某个按钮进行提交；
这些表单数据，通过互联网，传递到了服务器上；
服务器上有专门的程序，对表单数据进行验证，如果验证成功，则数据存入数据库，返回一个验证成功的信息。如果验证失败，将返回一个错误信息；
表单的制作分两个部分，一是前台页面的制作，二是后台php对表单的处理。

表单的结构

<form>标记属性

name:给表单起个名字，这个名字主要给JavaScript来用，JS主要用来做客户端表单验证
method :表单的提交方式，取值：get（默认；通过地址栏传递，可在地址栏看到提交的信息）或post ;
action :指定表单的处理程序，一般是php文件；当action取值为空则默认提交给当前网页文件
enctype :指定表单数据的编码方式（解密方式）；这个属性只能用在 method="post"的情况下，有两个取值：
application/x-www-form-urldecoded //默认的加密方式
multipart/form-data //如果你要上传文件时取值为此值，

get方法和post方法

1，get方法提交方式（默认方式，地址栏也是默认为get方式；但表单中通常使用post方法）
get方式，是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求；

特点：1，get方式不能提交敏感数据，如：密码；
2，get方式只能提交少量数据，因为长度有限制，大约100个字符；
3，get方式下不能上传附件（文件）

post表单提交方式
post提交方式不是将表单数据追加到地址上，而是直接传给表单处理程序；
特点：1，post提交的数据相对安全；
2，post可以提交海量数据；
3，post方式可以上传附件。

单行文本域

语法格式：<input type=“text” 属性=“值”/>

常用属性：
name :文本框的名字，命名规则是：可以包含字母，数字，下划线，只能以字母开头；
type :表单元素的类型；
value :文本框中的值；
size :文本框的长度，以“字符”为单位。
maxlength :最多可以输入多少个字符，超出的就输不进去了；
readonly :只读属性，可以选中，但不能修改；如：readonly=“readonly”
disabled ;禁用属性，不能选中，不可修改；如：disabled=“disabled”

单行密码域

与文本域非常相似
语法格式：<input type=“password” 属性=“值” />
常用属性：
name :文本框的名字，命名规则是：可以包含字母，数字，下划线，只能以字母开头；
type :表单元素的类型；
value :文本框中的值；
size :文本框的长度，以“字符”为单位。
maxlength :最多可以输入多少个字符，超出的就输不进去了；
readonly :只读属性，可以选中，但不能修改；如：readonly=“readonly”
disabled ;禁用属性，不能选中，不可修改；如：disabled=“disabled”

单选按钮

语法格式：<input type=“radio” 属性=“值” />
常用属性：
name :元素的名称
value :元素的值，该value中数据将发往服务器；
checked ：默认选择哪一项；如：checked=“checked”
注意：一组单选按钮，只能选择一个，但name的值必须一致；如：name=“sex”

单选按钮用户自己不能输入内容，用户只能选择，因此必须为它指定默认值value

复选框

语法格式：<input type=“checkbox” 属性=“值” />
常用属性：
name :元素的名称
value :元素的值，该value中数据将发往服务器；
checked ：默认选择哪一项；如：checked=“checked”

注意：复选框也是一组选项，因此name的值必须一致，在php中，使用数组来获取多个同名的name的值；复选框中可以同时选多个，也可以一个都不选。

下拉列表

语法格式：
<select name=“city”>
    <option value=“小明”>小明</option>
    <option value=“小红”>小红</option>
    <option value=“小白”>小白</option>
    <option value=“小紫”>小紫</option>
    <option value=“小黑”>小黑</option>
</select>

<select>标记的属性，只有一个name属性；
<option>标记的属性有两个：value属性，selected属性；
selected:设置默认选中，如：selected=“selected”

文本区域

<textare name=“名称” cols=“宽度” rows=“高度”>默认文本（一般为空，让用户输入的）</textare>
常用属性：
name:元素名称
cols:宽度，是指多少个字符宽
rows:高度，是指几行高
提示：<textarea>和</textarea>之间是默认文本

各种按钮

提交按钮：<input type=“submit” value=“提交表单” />
图片按钮：<input type=“image” src=“images/p1.jpg” /> //功能和提交按钮一样
重置按钮：<input type=“reset” value=“重新填写” />
普通按钮：<input type=“button” οnclick=“javascrpt.window.close()” value=“关闭窗口” /> //普通按钮本身是不具有任何功能的，一般要与JS程序配合使用，实现相应的功能。

隐藏域

功能：隐藏域就是看不见的框，传递一些值，而这个值又不想让别人看见；
用处：主要用于php后面程序，如：修改某一条新闻内容时，需要传递一个新闻的id号。
语法格式：<input type=“hidden” 属性=“值” />

上传文件域

语法格式：<input type=“file” 属性=“值” />
常用属性：
name:表单元素的名称
value :表单元素的值，这个值其实就是上传的文件名，但此时value属性被改为只读属性（为了安全性），value的内容只能通过手动选择要上传的文件后才改变
注意：此时只能实现上传文件框，而没有真正的上传，上传功能要用php来实现。
上传文件时则表单属性中的enctype="multipart/form-data"才行

<caption>表格标题

语法格式：<caption></caption>
<caption>是表格（<table>）的子标记，作为表格的标题，自动位于表格正上方，且加粗

@沉木

前端：HTML/06/表单，表单元素（单行文本域，单行密码域，单选按钮，复选框，下拉列表，文本区域，上传文件域，各种按钮，隐藏域，lt;caption表格标题）相关推荐

jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值...
做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...
前端学习（2007）vue之电商管理系统电商系统之优化复选框的样式
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
eazy ui 复选框单选_UI备忘单：单选按钮，复选框和其他选择器
eazy ui 复选框单选重点 (Top highlight) Pick me! Pick me! No, pick me! In today's cheat sheet we will be lo ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
html 复选框name值,HTML(5)表单元素以及对各个表单元素的name、value属性的理解
我在学习表单元素的时候感觉很混乱,特别是 name value这两个属性,没有真正理解它们是干什么的,所以需要梳理一下. HTML表单元素主要有 HTML5新增的表单元素有三个下面梳理一下这些表单元 ...
前端实现axios以表单方式上传文件，优化上传速度
一.背景最近在开发过程中,遇到的需要是需要上传高清图片,必须原图上传.由于在移动端应用,上传网络问题有很大的坑.当初的方案是直接采用将文件转化为base64,再进行上传,由于文件转化为base64后 ...
js控制复选框选中显示不同表单_Vue之表单
阅读本文约需要5分钟大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务! 1.长期为你提供最优质的学习资源! 2.给你解决技术问题! 3.每天在朋友圈里分享 ...
html手机单选框,手机移动网页制作：表单输入框、单选框、复选框
手机移动网页制作:表单输入框.单选框.复选框本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...
php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择在jQuery中,选中checkbox通用的两种方式 ...

前端：HTML/06/表单，表单元素（单行文本域，单行密码域，单选按钮，复选框，下拉列表，文本区域，上传文件域，各种按钮，隐藏域，lt;caption表格标题）