HTML form 表单
1.id、name的关系
通常我们在写HTML代码时，会给控件指定一个id属性，这个属性只供JS和CSS使用，在表单提交时，它不起任何作用;
在HTML代码中我们会指定不同的value为各个不同的控件做默认值，那么为那些控件指定相应的id属性将会方便地找到它们;
name属性的值是作为和服务器通信时使用的 key;
如果不需要用JS和CSS控制的控件，或许它们只是用来显示一些数据(只读)，那么就没有必要指定id属性，name属性也可以不用给出(避免提交无意义的数据)。
2.<form> </form> 标签：创建HTML表单
3.get,post ：表单提交方式
说明：
form用于为用户输入创建HTML表单
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
属性：
action [URL]: 规定当提交表单时向何处发送表单数据。
method [get/post]: 规定用于发送 form-data 的 HTTP 方法。
get: from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
post:from表单里所填的值，附加在HTML Headers上。
enctype [string]:规定在发送表单数据之前如何对其进行编码。
enctype 属性可能的值：
- application/x-www-form-urlencoded ：在发送前编码所有字符（默认方式）（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
- multipart/form-data ：不对字符编码，包含文件上传控件的表单时，必须使用该值
- text/plain ：空格转换为 "+" 加号，但不对特殊字符编码。
title：设置网站访问者的鼠标放在表单上的任意位置停留时，浏览器用小浮标显示的文本。
name:表单的名称。注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
表单元素
1.文本框
<html>
<head>
<meta charset='utf-8' />
<title>表单</title>
</head>
<body>
<form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="用户名"/><br/>
<label for="passwd">密码：</label>
<input type="password" id="passwd" name="passwd"/> </form>
</body>
</html>
用户名：
密码：
label:
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
文本框属性：
type 属性取值:
text -- 文字输入域(输入型)
password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
file -- 可以输入一个文件路径(输入型)
checkbox -- 复选框.可以选择零个或多个(选择型)
radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
button -- 按钮(点击型)
image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)
submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)
reset -- 重置按钮,可以把表单中的信息清空(点击型)
name:向服务器提交表单时的 key 值
size：指定文本框的宽度，以字符个数为单位；在大多数浏览器中，文本框的缺省宽度是20个字符。
value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击按钮之后在文本框中显示的值。
maxlength：指定用户输入的最大字符长度。
readonly：只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value。
disabled：禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器。
2.单选按钮
<form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data">
<label for="male">男</label>
<input type="radio" id="male" name="gender"/>
<label for="felmale">女</label>
<input type="radio" id="felmale" name="gender"/>
</form>
男 女
两个单选按钮的name属性必须相同才能关联起来
3.复选框
<form>
<label for="b">篮球</label>
<input type="checkbox" name="sport" id="b"/>
<label for="f">足球</label>
<input type="checkbox" name="sport" id="f"/>
<label for="c">棒球</label>
<input type="checkbox" name="sport" id="c"/>
<label for="d">兵乓球</label>
<input type="checkbox" name="sport" id="d"/>
</form>
篮球 足球 棒球 兵乓球
4. 文件上传
使用file，则form的enctype必须设置为multipart/form-data，method属性为POST。
<form action="127.0.0.1" method="post" enctype="multipart/form-data"> <p>要上传的文件１<input type="file" name="file"/></p> <p><input type="submit" value="提交" /></p>
</form>
要上传的文件１
5. 下拉框
<select> 下拉选标签属性：
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<form action="127.0.0.1" enctype="multipart/form-data" method="post" id="fname"> </form>
<select name="carlist" form="fname">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
select 写在表单之外，但仍属于表单的一部分（select的form属性，form的id属性）
<form action="127.0.0.1" enctype="multipart/form-data" method="post">
<select name="carlist">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</form>
Volvo
Saab
Opel
Audi
<form action="127.0.0.1" enctype="multipart/form-data" method="post">
<select name="carlist">
<optgroup label="car"></optgroup>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<optgroup label="fruit"></optgroup>
<option value="orange">Orange</option>
<option value="apple">Apple</option>
</select>
</body>
6.文本域
定义和用法
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
<form action="127.0.0.1" enctype="multipart/form-data" method="post">
<textarea cols="20" rows="10" name="textarea">写点啥呢</textarea>
</form>
写点啥呢
7.提交，重置
<form action="127.0.0.1" enctype="multipart/form-data" method="post">
<input type="submit" value="登陆">
<input type="reset" value="重置">
</form>
HTML form 表单的更多相关文章
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- Form 表单提交参数
今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...
- form表单 ----在路上（15）
form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...
- form表单的字符串进行utf-8编码
<form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...
- 细说 Form (表单)
细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...
- 通过form表单的形式下载文件。
在项目中遇到问题,要求动态拼接uri下载文件.但是由于项目的安全拦截导致window.location.href 和 window.open等新建窗口的方法都不行. 无意间百度到了通过form表单来下 ...
- form 表单跨域提交
<!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...
- form表单的属性标签
form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...
- form表单的属性标签和练习
form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...
- Django基础，Day5 - form表单投票详解
投票URL polls/urls.py: # ex: /polls/5/vote/ url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, ...
随机推荐
- Synchronization Service Manager
You can use this UI Shell to check the User Profile log for the SharePoint. It's stored in this pa ...
- [转]iOS开发中的火星坐标系及各种坐标系转换算法
iOS开发中的火星坐标系及各种坐标系转换算法 源:https://my.oschina.net/u/2607703/blog/619183 其原理是这样的:保密局开发了一个系统,能将实际的坐标转 ...
- 分布式架构中一致性解决方案——Zookeeper集群搭建
当我们的项目在不知不觉中做大了之后,各种问题就出来了,真jb头疼,比如性能,业务系统的并行计算的一致性协调问题,比如分布式架构的事务问题, 我们需要多台机器共同commit事务,经典的案例当然是银行转 ...
- 从AdventureWorks学习数据库建模——保留历史数据
在业务需求中,经常需要我们在系统中能够记录历史信息,能够查看到历史变动情况,这时我们可以通过增加开始结束时间字段来记录数据的历史版本.对数据的历史记录主要分为:关系.属性历史,实体历史和变更历史. 关 ...
- .NET/ASP.NET Routing路由（深入解析路由系统架构原理）
阅读目录: 1.开篇介绍 2.ASP.NET Routing 路由对象模型的位置 3.ASP.NET Routing 路由对象模型的入口 4.ASP.NET Routing 路由对象模型的内部结构 4 ...
- BOOST.Asio——Tutorial
=================================版权声明================================= 版权声明:原创文章 谢绝转载 啥说的,鄙视那些无视版权随 ...
- java实现REST方式的webService
一. 简介 WebService有两种方式,一是SOAP方式,二是REST方式.SOAP是基于XML的交互,WSDL也是一个XML文档, 可以使用WSDL作为SOAP的描述文件:REST是基于HTTP ...
- Linux 服务器模型小结
当我们用socket进行编程的时候,细节上都是选择一个AF_LOCAL,AF_INET再根据相应的类型填充地址,其实根据通信需求,有几种简单的服务模型可供选用,掌握了这些框架再结合socket高度的抽 ...
- addEventListener 的另类写法
addEventListener 参数如下 addEventListener(type, listener[, useCapture]); type,事件名称 listener,事件处理器 useCa ...
- Linux下定时执行脚本（转自Decode360）
文章来自:http://www.blogjava.net/decode360/archive/2009/09/18/287743.html Decode360's Blog 老师(业精于勤而荒于嬉 ...