整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

12.HTML表单标签

12.HTML表单标签

.form 标签

1)作用

<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容

2)基本格式

<form action="服务器端地址(接受表单内容的地址)" name="表单名称" method="post|get">...</form>

3)常用属性

1.name

表单名称

2.method

传送数据的方式,分为post和get两种方式:

  1. get方式:get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性。
  2. post方式:post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制。
3.action

表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为”no“。

4.enctype

设置表单的资料的编码方式。属性值:

  1. application/x-www-form-urlencoded:在发送前编码所有字符(默认)
  2. multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
  3. text/plain:空格转换为 "+" 加号,但不对特殊字符编码。
5.target

和超链接的属于类似,用来指定目标窗口。

2.input 标签

1)注意

input 标记没有结束标记。

2)基本语法

<input type="" name="" value="" size="" maxlength="">

3)属性

1.type属性
  1. text:文本输入域
  2. password:密码输入域
  3. submit:提交按钮
  4. reset:重置按钮
  5. button:普通按钮
  6. radio:单选按钮,可以使用”checked“属性来设置默认选中项
  7. checkbox:复选框,可以使用”checked“属性来设置默认选中项
  8. hidden:隐藏表单域
  9. file:文件域
2.name属性

定义控件的名称

3.value属性

初始化值,打开浏览器时,文本框中的内容

4.size属性

设置控件的长度

5.maxlength属性

输入框中最大允许输入的字符数

3.textarea 标签

1)作用

使用 textarea 标记可以实现一个能够输入多行文本的区域。

2)语法格式

rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数;value指定传送到服务器上面的值。

<textarea name="name" rows="value" cols="value" value="value">... ... </textarea>

4.select 标签

1)作用

菜单下拉列表域,生成一个下拉列表。

2)option 标签

作用:

option 标记用来指定列表中的一个选项,需要放在 select 之间。

值:

  1. value:给选项赋值,指定传送到服务器上面的值。
  2. selected:指定默认的选项。

3)语法格式

<select name="" size="value" multiple>    <option value="value1" selected>选项1</option>    <option value="value2">选项2</option>    <option value="value3">选项3</option>    ... ... ...</select>

4)属性

  1. multiple属性:multiple属性不用赋值,其作用是,表示用可以多选的下来列表,如果没有这个属性就只能单选。
  2. size属性:设置列表的高度。
  3. name属性:定义这个列表的名称。

5.label 标签

1)作用

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

2)语法
<label for="male">Male</label><input type="radio" name="sex" id="male">

6.举例

<form name="form" method="post" action="no" enctype="multipart/form-data">  <label for="male">账号:</label><input type="text" name="username" value="admin"  id="male"><br>  密码:<input type="password" name="password" size="50" maxlength="6"><br>  性别:<input type="radio" name="sex" value="男"> 男    <input type="radio" name="sex" value="女" checked="checked"> 女<br>  兴趣:<input type="checkbox" name="interest" value="篮球">篮球    <input type="checkbox" name="interest" value="足球" checked="checked">足球    <input type="checkbox" name="interest" value="羽毛球" checked="checked">羽毛球    <input type="hidden" name="hidden"><br>  头像:<input type="file" name="file"><br>  简介:    <textarea rows="10" cols="30">        </textarea><br>  城市:    <select name="city" multiple>      <option value="beijing">北京</option>      <option value="shanghai" selected>上海</option>      <option value="nanjing">南京</option>      <option value="guangdong">广东</option>    </select>  <br>  <input type="submit" value="注册">  <input type="reset">  <input type="button" value="普通按钮"></form>


单(form)

  • 作用: 用于收集用户信息, 让用户填写、选择相关信息

  • 格式:

  • 注意事项:

    • 所有的表单内容,都要写在form标签里面

    • form标签中有两个比较重要的属性actionmethod, 但就现目前大家的知识储备而言暂时无法理解, 所以放到后面的课程中讲解

input标签

  • 如果说td是表格最核心的标签, 那么input就是表单最核心的标签. nput标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

  • 明文输入框

    • 作用: 用户可以在输入框内输入内容

    • 账号:<input type="text"/>

  • 暗文输入框

    • 作用: 用户可以在输入框内输入内容

    • 密码:<input type="password"/>

  • 给输入框设置默认值

    • 账号:<input type="text" value="123"/>

    • 密码:<input type="password" value="123"/>

  • 规定输入字段中的字符的最大长度

    • 账号: <input type="text" name="fullname" maxlength="8" />

  • 单选框(radio)

    • 作用: 用户只能从众多选项中选择其中一个

    • 单选按钮,天生是不互斥的,如果想互斥,必须要有相同的name属性

  • 多选框(checkbox)

    • 作用: 用户只能从众多选项中选择多个

    • 复选框,最好也是有相同的name(虽然他不需要互斥,但是也要有相同的name)

  • 给单选、多选设置默认值

    • 指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性

  • label标签

    • 表单元素要有一个id,然后label标签就有一个for属性,for属性和id相同就表示绑定了

    • 所有表单元素都可以通过label绑定

    • 作用: label标签不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性

    • 注意事项:

      表单元素要有一个id,然后label标签就有一个for属性,for属性和id相同就表示绑定了

      所有表单元素都可以通过label绑定

  • 按钮

    • 作用: 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)

    • <input type="button" value="点我丫" />

  • 图片按钮

    • 作用:定义图像形式的提交按钮

    • <input type="image" src="lnj.jpg" />

  • 重置按钮

    • 这个按钮不需要写value自动就有“重置”文字

    • reset只对form表单中表单项有效果

    • 作用: 定义重置按钮。重置按钮会清除表单中的所有数据

    • <input type="reset" />

    • 注意事项:

  • 提交按钮

    • 这个按钮不需要写value自动就有“提交”文字

    • 要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性

    • 默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)

    • 作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面

    • <input type="submit" />

    • 注意事项:

  • 隐藏域

    • 作用: 定义隐藏的输入字段

    • <input type="hidden">

    • 暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用

  • 取色器

    • <input type="color">

    • HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

  • 日期选择器

    • <input type="date">

    • HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

数据列表

  • 作用: 给输入框绑定待选项

  • 格式:



  • 如何给输入框绑定待选列表

    • 搞一个输入框

    • 搞一个datalist列表

    • 给datalist列表标签添加一个id

    • 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

多行文本框(文本域)

  • 作用: textarea标签用于在表单中定义多行的文本输入控件

    • cols属性表示columns“列”, 规定文本区内的可见宽度

    • rows属性表示rows“行”, 规定文本区内的可见行数

  • 格式:

    <textarea cols="30" rows="10">默认

关于课程的疑问和更多讨论,可以登录http://bbs.520it.com/forum.php?mod=viewthread&tid=2429