html表单元素及表单元素详解
原⽂
⼤纲
  1、认识表单
  2、认识表单元素
  3、表单元素的分类
  4、表单元素——⽂本框
  5、表单元素button
  6、表单元素——单选、多选
  7、表单元素——select
  8、表单元素——textarea
  9、推荐
1、认识表单
  1、在⼀个页⾯上可以有多个form表单，但是向web服务器提交表单的时候，⼀次只可以提交⼀个表单。
  2、要声明⼀个表单，只需要使⽤form标记来标明表单的开始和结束，若需要向服务器提交数据，则在form标签中需要设置action属性（⽤来设置提交表单的位置）、method属性（⽤来定义浏览器将表单中的信息提交给服务器端程序的处理⽅式）、target属性（⽤来指定服务器返回结果所显⽰的⽬标窗⼝或⽬标框架）；但是，对于客户端脚本编程来说，并不需要这些属性来帮助提交表单信息，form标签存在的意义是在于⽅便在脚本中编程的时候进⾏引⽤。
  3、表单的引⽤可以利⽤from标签的name属性或者也可以利⽤document的forms[]数组中调⽤到对应的数组。
  4、可以利⽤form表单的elements[]数组来遍历除了<input type=image >元素之外的所有元素
  5、form表单的submit()⽅法⽤于将表单提交给服务，但我们点击submit按钮的时候，submit按钮会相应的调⽤onsubmit事件处理器从⽽调⽤Form对象的submit事件
  6、如何在浏览器中使⽤页⾯中的信息，我们称之为“客户端脚本编程”，⽽如何把信息提交给Web服务，并将数据库保存在数据库中，我们通常称为“服务器端脚本编程”
  7、在早期，所有可交互的HTML元素都应该放在HTML表单中，但是现在的定义是，需要提交到web服务器的数据，才必须要放在表单内，可是前⼀种理解的⽅式也不是完全错误的，因为⼀般可以交互的HTML元素，都是表单元素（在前期），即：浏览器需要处理的数据都是表单元素，因此需要将其放在HTML表单中。
2、认识表单元素
  1、⼤部分的表单控件元素都是由<input>标记创建的，<input>标记具有⼀个type属性，该属性决定了<input>标记所创建的表单控件的类型。
  2、所有的单控件对象都具有⼀个name属性，JavaScript脚本通过name属性的值来引⽤特定的表单控件元素，同时这也是表单提交到服务器时，每个表单控件元素的值value所对应的key值。
  3、绝⼤部分对象都具有value属性，该属性返回当前表单控件的值。
  4、所有的表单控件对象都具有⼀个form属性，该属性返回包含当前控件的Form对象。对于⼀个通⽤的表单数据检查程序来说，⽤这个属性来标明哪些控件属于哪个表单。
  5、所有的表单元素对象都具有focus()和blur()⽅法，同时所有的表单元素对象还具有onfocus和onblur事件处理器。
3、表单元素的分类
  常见的表单控件有：
    1、Text Input Elements:
      <input type="text"> 、<input type="password">、<textarea></textarea>
    2、Tick Box Elements:
      <input type="checkbox"> 、<input type="radio">
    3、Select Elements:
      <select size=1><option></option></select>、<select size=5 multiple><option></option></select>（下拉⼤框、多选）
    4、Button:
      <input type="button">、<input type="submit">、<input type="reset">
4、表单元素——⽂本框
  1、<input type="text">通过对input表单元素的type设置text来让浏览器创建Text表单元素对象。
  2、Text对象的value属性表⽰的就是⽂本框中的值。
  3、⽂本框的input标记还具有size属性（⽤于决定⽂本框具有多少个字符的宽度）、maxlength属性(⽤于决定⽤户可以在⽂本框中输⼊多少个字符)。
  4、Text对象还具有select()⽅法，⽤以选择或加亮⽂本框中的⽂本，当⽤户在⽂本框中输⼊了⽆效值的时候，我们可以通过focus()⽅法将输⼊焦点设置回该⽂本框，并且使⽤select()⽅法选中⽂本框中的⽂本，并且光标落在⽂本框的右边。
  5、Text对象的value获取到的都是字符串类型的值，哪怕输⼊的是纯数字也会转换成字符串，但是如果对该value的操作⾜够明显的说明其是数值类型数据，那么后台会将其⾃动转换（如减法），但是若⽆法⾜够明显的说明，那么仍旧是作为字符串数据类型使⽤（如加法，字符串也有加法的⽅法），所以若是要将其作为数值数据类型使⽤，最好都将其⾸先显⽰的转换数据类型⽽不是依靠JavaScript隐式的转换。
  6、Text对象具有多个事件处理器：
    onfocus事件处理器（获得焦点）、
    onblur事件处理器（失去焦点）、
    onselect事件处理器（选中）、
    onchange事件处理器（当且仅当⽂本框失去焦点时的值与获得焦点的值不同是）、
    onkeydown事件处理器（键盘按下）、
    onkeypress事件处理器（按了⼀个键）、
    onkeyup事件处理器（键盘抬起）
  7、不同浏览器对blur事件的解析不同。
  8、<input type="password" name=myPassword>密码框，使⽤密码框的唯⼀⽬的是当⽤户在页⾯上输⼊密码的时候，隐藏⽤户输⼊的密码字符串以防⽌偷窥，但是密码框仅仅是使⽤星号或其他符号代替显⽰，并没有对密码进⾏加密，当表单提交的时候，仍是以明⽂发送的，因此，使⽤密码框来传递
重要信息并不是⼀个安全的⽅法
  9、<input type="hidden" name=myHidden>隐藏域，隐藏域可以像⽂本框⼀样⽤来输⼊字符串或数字，不同之处在于隐藏域对于⽤户来说是不可见的。隐藏域对于⽤户来说是为了避免过于冗余的表单元素出现在页⾯，因此将⼀些需要提交的但已经填写验证过的表单元素输⼊此中并隐藏，等到最后提交的时候统⼀提交。
5、表单元素button
  1、button元素的创建是<input type="button">，通过声明type来定义input元素，从⽽浏览器将为button元素创建⼀个对应的Button对象。
  2、Button对象包含value属性，通过value属性来显⽰按钮上的⽂本
  3、Button对象包含onclick事件处理器、onmouseup事件、nomousedown事件
  4、submit按钮具有特定的⽤途，并且不需要依靠脚本来实现，当submit按钮被单击时，按钮所在表单中的数据将⾃动提交到服务器，并不需要编写任何脚本
  5、reset按钮被单击时，按钮所在的表单中的所有元素都将被清空，或者被设置为元素的默认值（即页⾯第⼀次加载时元素所具有的值）
6、表单元素——单选、多选
  1、单选按钮type="radio"、复选框type="checkbox"通过设置type属性来创建对应的表单元素对象
  2、通过在input标签中添加关键字checked来设置默认选项，注意，radio单选按钮只有⼀个能被选中，若设置多个checked，只会实现最后⼀个。
  3、Checkbox对象和Radio对象的value属性是在HTML中预定义的或者是⽤JavaScript定义的，该value属性不表⽰⽤户与复选框或单选按钮交互的任何信息，⽆论复选框或单选按钮是否被选中，该value属性的值是不变的，另外，当向服务器提交表单时，仅仅是被选中的复选框或者单选框的按钮被提交到服务器，未选中的是不会被提交的。
7、表单元素——select
  1、创建：通过这样的⽅式来创建select下来列表框对象
<select>
<option><option>
<option><option>
...
<select>
  2、Select对象具有size（想要展⽰的选择条数），multiple（是否多选）
<!--
若要显⽰只有⼀条显⽰的单选：
-->
<select>
<option></option>
<option></option>
<option></option>
</select>
<!--
若要显⽰只有两条显⽰的单选：
-->
<select size=2>
<option></option>
<option></option>
<option></option>
</select>
<!--
若要显⽰只有两条显⽰的多选：
-->
<select size=2 multiple>
<option></option>
<option></option>
<option></option>
</select>
  3、Select对象具有数组属性options[]，该数组的元素是Option对象
  4、Option对象具有index属性（Option在当前options[]数组中的索引）、text属性（返回当前项在列表框中显⽰的⽂本标题）、value属性（返回当前项所定义的值）
  5、要在列表框中添加新的列表项，那么需要new⼀个新的Option对象，然后再把该对象插⼊到options[]数组中⼀个空的options[]数组元素，当在某个已经存在了选项的索引位置插⼊⼀个新的选项事，注意该索引位置上原来的选项将会被覆盖掉。要在列表框中移除某个列表项，那就是把options[]数组中该选项所对应的数组元素设置为null，当移除⼀个Option对象时，options[]数组将重新排序，每⼀个排在被移除选项之后的Option对象的索引将⾃动减1.
  6、在IE浏览器中添加新的列表项有⾃⼰的add()、remove()⽅法来添加和引出下拉选项。
  7、下拉列表框具有onblur事件处理器、onfocus事件处理器、onchange事件处理器
8、表单元素——textarea
  1、<textarea></textarea>textarea元素允许⽤户输⼊多⾏⽂本
  2、textarea对象拥有cols属性（定义⽂本区域宽度，单位是单个字符的宽度）、rows属性（定义⽂本区域⾼度，单位是单个字符的⾏⾼）
  3、textarea对象还具有⼀个wrap属性，默认值是soft（⾃动软回车换⾏），hard属性（⾃动硬回车换⾏，该⾏为会将其换⾏地⽅同数据⼀起上传），off（关闭换⾏）
  4、textarea标签不包含value属性，但是Textarea对象具有value属性，其的值是包含在textarea标签中的内容。
textarea中cols表示
9、推荐
  在这⾥我仅仅是阐述了我⾃⼰对表单知识的⼀些认知和理解，也许还不够全⾯和具体，但是还是希望
能够帮助到读者，并且这⾥我推荐两篇我写的同样的关于表单的知识，⼀篇是我遇到的表单的问题，还有⼀篇是我使⽤表单的实例应⽤，同样希望能对读者有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。