首页 > 代码库 > HTML学习-------表单

HTML学习-------表单

表单:

    是网页上的一个特定的区域,这个区域是由一对<form>标记定义的。

    定义:<form>

              <input>元素

         </form>

   (form 元素是块级元素,其前后会产生折行。)


    表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。


    表单用于向服务器传输数据。


表单的属性:


    action属性:规定提交表单时,向何处发送数据

                语法:<form action="URL">...</form>

   

    name属性:规定表单的名称。

              form 元素的 name 属性提供了一种在脚本中引用表单的方法。

              语法:<form name="form_name">...</form>


    method属性:规定如何发送表单数据(表单数据发送到action所规定的页面)

                可取值为:get和post

                语法:<form method="method">...</form>

   

    enctype属性:规定表单提交之前,如何对其进行编码

                 语法:<form enctype="value">...</form>

    enctype的值:   

描述
application/x-www-form-urlencoded

在发送前编码所有字符(默认)

{在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)}


multipart/form-data

不对字符编码。

在使用包含文件上传控件的表单时,必须使用该值。

text/plain空格转换为 "+" 加号,但不对特殊字符编码。

              

     target属性:规定在何处打开 action URL。

                 语法:<form target="value">...</form>

描述
_blank在新窗口中打开。
_self默认。在相同的框架中打开。
_parent在父框架集中打开。
_top在整个窗口中打开。
framename在指定的框架中打开。


      accept-charset属规定服务器用哪种字符集处理表单数据。

                         常用值:

                               UTF-8 - Unicode 字符编码

                               ISO-8859-1 - 拉丁字母表的字符编码

                               gb2312 - 简体中文字符集


      autocomplete属性:规定表单是否启用自动完成功能。(是HTML5的新增属性)

                        取值:on/off;


                        自动完成允许浏览器预测对字段的输入。

                        当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段

                        中填写的选项。

       注:autocomplete 属性适用于 <form>,

           以及下面的 <input> 类型:

           text, search, url, telephone, email, password, datepickers, range 以及 color。

       

      novalidate 属性:规定当提交表单时不对其进行验证。(是HTML5的新增属性)


表单中的input标记:

    语法:<form>

              <input name="filed_name" type="type_name">

           </form>


   input中的属性:

     accept属性:accept 属性只能与 <input type="file"> 配合使用。

                  它规定能够通过文件上传进行提交的文件类型

                  尽量避免使用该属性,应该在服务器上验证文件上传。


     align属性:定图像输入的对齐方式,与<input type="image">配合使用。

                避免使用该属性;用css样式代替。

                只有left和right值被所有浏览器支持。


     alt属性:为图像输入规定替代文本,alt 属性只能与 <input type="image"> 配合使用。

              注释:alt 属性不是必需的属性,但是当输入类型为 image 时,仍然应该设置该属性。

                    如果不使用该属性,就有可能对文本浏览器或非可视的浏览器造成使用障碍。


     checked属性:规定在页面加载时被预先选中的input元素。

                  与<input type="checkbox"> 与<input type="radio"> 配合使用。

                  这个值可以在页面加载后,用Javascript动态指定。


     disable属性:禁用input元素。

                  注:不能与<input type="hidden">一起使用。


     maxlength 属性:规定输入字段的最大长度,以字符个数计。

                     与 <input type="text"> 或 <input type="password"> 配合使用。


     name属性规定input的名称


     size属性:规定输入框的宽度

               用CSS代替:<input style="width:100px" />


     src属性:规定图片的URL,与<input type="image">配合使用。


     value属性:为 input 元素设定值。

           注:<input type="checkbox"> 和 <input type="radio"> 必须设置 value 属性。

                注:value 属性无法与 <input type="file"> 一同使用。


     type属性

描述
button定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox定义复选框。
file定义输入字段和 "浏览"按钮,供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

     

   HTML5中的input属性:

     autocomplete:规定是否使用输入字段的自动完成功能。

      autofocus属性在页面加载时获取焦点。

      form属性:规定input元素所属的一个或者多个表单

      formaction属性:覆盖表单的 action 属性。

      formenctype属性:覆盖表单的 enctype 属性。

      formmethod 属性:覆盖表单的 method 属性。

     formnovalidate属性:覆盖表单的 novalidate 属性。

                            如果使用该属性,则提交表单时不进行验证。

      formtarget属性: 覆盖表单的 target 属性。

      height和width属性:定义input元素宽高,只是适用于type=image

      list属性:引用数据列表,其中包含输入字段的预定义选项。

      max 和 min 属性:规定输入字段所允许的最大值和最小值。

                       提示:max 属性与 min 属性配合使用,可创建合法值范围。

                注:max 和 min 属性适用于以下 <input> 类型:

                    number, range, date, datetime, datetime-local, month, time 以及 week。

           可以配合使用step属性规定输入字的的合法数字间隔)

      multiple属性:允许选择多个值,适用于type="file"

      pattern属性:规定输入字段的值的模式或格式。

      placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

      readonly属性:规定输入字段为只读。    

      required属性:指示输入字段的值是必需的。    


表单中的textarea标记:

属性描述
autofocusautofocus规定在页面加载后文本区域自动获得焦点。
colsnumber规定文本区内的可见宽度。
disableddisabled规定禁用该文本区。
formform_id规定文本区域所属的一个或多个表单。
maxlengthnumber规定文本区域的最大字符数。
namename_of_textarea规定文本区的名称。
placeholdertext规定描述文本区域预期值的简短提示。
readonlyreadonly规定文本区为只读。
requiredrequired规定文本区域是必填的。
rowsnumber规定文本区内的可见行数。
wrap
  • hard

  • soft

规定当在表单中提交时,文本区域中的文本如何换行。。


表单中的select标记(option标记:)

属性描述
autofocusautofocus规定在页面加载后文本区域自动获得焦点。
disableddisabled规定禁用该下拉列表。
formform_id规定文本区域所属的一个或多个表单。
multiplemultiple规定可选择多个选项。
namename规定下拉列表的名称。
requiredrequired规定文本区域是必填的。
sizenumber规定下拉列表中可见选项的数目。


表单还可以包含 menustextareafieldsetlegend 和 label 元素