html表单元素及表单元素详解

Posted 2020-11-20 shcrk

原文

　　https://www.jianshu.com/p/b427daa8663d

大纲

　　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标签中的内容。

9、推荐

　　在这里我仅仅是阐述了我自己对表单知识的一些认知和理解，也许还不够全面和具体，但是还是希望能够帮助到读者，并且这里我推荐两篇我写的同样的关于表单的知识，一篇是我遇到的表单的问题Html表单中遇到的问题，还有一篇是我使用表单的实例应用Html表单使用实例，同样希望能对读者有所帮助。