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, ...
随机推荐
- SharePoint 2013 Designer系列之数据视图筛选
在SharePoint中,我们经常需要对列表进行简单的筛选,这时,数据视图就有作用了,我们可以定制对于字段的筛选,来进行展示:特别的,筛选不同于搜索,并没有对于附件或者文档的全文检索,如果需要全文检索 ...
- Sharepoint学习笔记—ECM系列—文档列表的Metedata Navigation与Key Filter功能的实现
如果一个文档列表中存放了成百上千的文档,想要快速的找到你想要的还真不是件容易的事,Sharepoint提供了Metedata Navigation与Key Filter功能可以帮助我们快速的过滤和定位 ...
- 如何保证Service在后台不被kill
如何保证Service在后台不被kill 相信很多Android开发者在面试过程中会经常被问到“如何保证Service在后台不被kill”这个问题,总结了下一些大神给的答案. 引用知乎Android ...
- iOS开发之第三方库的学习--hpple的使用
前言:因为在开发中很可能会遇到html解析,如果后台提供的数据只有html数据,或者开发的app需要从web前端的html里获取数据,就需要html解析工具了. 关于HTML解析库,可以阅读:收集几个 ...
- Linux sendmail发送邮件失败诊断案例(一)
在新服务器上测试sendmail发送邮件时,发现邮件发送不成功,检查日志文件发现如下错误(Notice:由于涉及公司服务器,邮箱等,故下面hostname.邮箱地址等信息使用xxx代替) tail - ...
- SQL Server 复制快照执行错误 错误代码 14068
问题描述: 使用基于快照初始化的事务复制,在上次发布的时候,添加项,执行快照agent,报错,错误信息: Error messages:Message: The subscription status ...
- 实时事件统计项目：优化flume:用file channel代替mem channel
背景:利用kafka+flume+morphline+solr做实时统计. solr从12月23号开始一直没有数据.查看日志发现,因为有一个同事加了一条格式错误的埋点数据,导致大量error. 据推断 ...
- CentOS系统 yum 安装 iftop实时流量监控工具
一. 不多说其他的无用话题.直接看步骤: 1.要安装某个工具,首先得知道这个工具需要依赖包. eg:iftop 就依赖 以下这几个依赖包(不清楚工具依赖什么包“Google.百度”). flex ...
- WPF 自定义柱状图 BarChart
WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...
- Laravel 数据库读写分离
config/database.php ... 'mysql' => [ 'driver' => 'mysql', 'host' => env('DB_HOST', 'localho ...