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 表单的更多相关文章

  1. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  2. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

  3. form表单 ----在路上（15）

    form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...

  4. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  5. 细说 Form (表单)

    细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...

  6. 通过form表单的形式下载文件。

    在项目中遇到问题,要求动态拼接uri下载文件.但是由于项目的安全拦截导致window.location.href 和 window.open等新建窗口的方法都不行. 无意间百度到了通过form表单来下 ...

  7. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

  8. form表单的属性标签

    form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...

  9. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...

  10. Django基础，Day5 - form表单投票详解

    投票URL polls/urls.py: # ex: /polls/5/vote/ url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, ...

随机推荐

  1. 从 HTTP 到 HTTPS - IIS 部署免费 HTTPS

    这篇文章首发于我的个人网站:听说 - https://tasaid.com/,建议在我的个人网站阅读,拥有更好的阅读体验. 这篇文章与 博客园 和 Segmentfault 共享. 前端开发QQ群:3 ...

  2. 最详细的hadoop2.2.0集群的HA高可靠的最简单配置

    简介 [from http://www.open-open.com/lib/view/open1390717631132.html] hadoop中的NameNode好比是人的心脏,非常重要,绝对不可 ...

  3. Linux0.11内核--加载可执行二进制文件之1.copy_strings

    从现在开始就是分析最后的核心模块exec.c了,分析完这个文件后,就会和之前的所有分析形成一个环路,从创建进程.加载进程程序到进程调度.内存管理. exec.c的核心do_execve函数很长,而且用 ...

  4. mysql 基本

    mysql -u root -p 输入密码进入数据库 show database; 查询当前库 use databasename 切换到某个库 show tables; 列出当前数据库的表 desc ...

  5. 数据仓库之启用cdc

    准备工作: 先将sqlservere 代理服务启动 USE [MyDB]; GO EXECUTE sys.sp_cdc_enable_db; --启用数据库对CDC的支持 GO -- 设置别名 @ca ...

  6. 集合3--毕向东java基础教程视频学习笔记

    Day 15 集合框架01 TreeSet02 TreeSet存储自定义对象03 二叉树04 实现Comparator方式排序05 TreeSet练习06 泛型概述07 泛型使用08 泛型类09 泛型 ...

  7. Linux SendMail发送邮件失败诊断案例(二)

    Linux上Sendmail经常由于一些配置问题,导致邮件发送失败,下面整理.收集了一些邮件发送失败.异常的案例. 案例1:在新服务器上测试sendmail发送邮件时,发现邮件发送不成功,检查/var ...

  8. Reporting Service 告警"w WARN: Thread pool pressure. Using current thread for a work item"

    如果Reporting Service偶尔出现不可访问或访问出错情况,这种情况一般没有做监控的话,很难捕捉到.出现这种问题,最好检查Reporting Service的日志文件. 今天早上就遇到这样一 ...

  9. MS SQL 监控错误日志的告警信息

    SQL Server的错误消息(Error Message)按照消息的严重级别一共划分25个等级,级别越高,表示严重性也越高.但是如果你统计sys.messages,你会发现,实际上只有16(SQL ...

  10. Hive官方手册翻译(Getting Started)

    翻译Hive官方文档系列,文中括号中包含 注: 字样的,为我自行标注的,水平有限,翻译不是完美无缺的.如有疑问,请参照Hive官方文档对照查看.   内容列表 Cloudera制作的Hive介绍视频 ...