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, ...

随机推荐

TFS online 自动部署配置
概要采用tfs online进行源码管理,并配置自动编译部署到外网上一台服务器上(阿里云虚拟机) 步骤; 下载angent,并运行脚本安装配置release managemetn; 1)Copy ...
友盟SDK实现分享
友盟SDK文档已经写得很详细了,这边整理笔记,先过一遍流程: 1⃣️注册友盟账号以获取Appkey,下面以分享到微信为例 2⃣️申请第三方账号是因为要进行分享.授权这样的操作肯定是要通过第三方的审核( ...
win7显示不是正版系统的解决方法
十一长假回来,打开电脑就变成这样了.现在的我已经学会了不再逃避问题,要学着解决问题,就在网上搜集了有关这方面的信息.说是下载一个激活工具就可以了.我就试着下载了,但是不知道为什么下了几个激活工具都不管 ...
Mac上idea快捷键
名称快捷键代码提示 ctrl + space 自动修正 alt + enter 查看调用链call hierarchy ctrl + H 查找文件双击shift 查找类 command + N ...
#研发解决方案#基于Apriori算法的Nginx+Lua+ELK异常流量拦截方案
郑昀基于杨海波的设计文档创建于2015/8/13 最后更新于2015/8/25 关键词:异常流量.rate limiting.Nginx.Apriori.频繁项集.先验算法.Lua.ELK 本文档 ...
版本管理-SVN本地版本管理
0. 引言使用工具是人与动物的基本区别,善用工具可以极大的提高效率,降低错误率.在PC软件领域,有很多好用的工具,这些工具都是软件工程重要的基础设施.然而,嵌入式开发,在其代码数量上,很多时候由于没 ...
JDBC Driver Types
JDBC Driver Types Type1: JDBC-ODBC Bridge Driver Type2: JDBC-Native API Type3: JDBC-Net Pure Java Ty ...
x01.Weiqi.9: 点目功能
添加点目功能,虽不中,不远也.还是先看看截图吧. 确保其可行,再看一张: 其点目结果,还是比较令人满意的.这主要得益于多遍扫描,如编译器的词法分析阶段,下面的代码可以证明: private void ...
Linux的概念与体系
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我在这一系列文章中阐述Linux的基本概念.Linux操作系统继承自UNIX.一个 ...
超详细的java反射教程
看技术博客时,看到关于java反射的博文,写的非常好.猛击下面的地址,开始java反射之旅中文翻译地址:http://ifeve.com/java-reflection/ 英文原版地址:http:/ ...

HTML form 表单

定义和用法

HTML form 表单的更多相关文章

随机推荐

热门专题