HTML(II)

HTML语言细节（II）——表单标记HTML语言细节（II）——框架标记HTML标准表单初印象表单form标记各类表单控件标记表单的布局表单总结重要表单供访问者输入数据表单控件标记（表单元素）表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能访问一个包含表单的页面，输入数据后，“提交”表单浏览器将用户在表单中输入的数据进行打包，并发送给服务器服务器接收数据并转由程序处理data在HTML文档中，form/form标记对用来定义表单的开始和结束在表单form/form之间嵌入各类表单控件标记（如：文本输入框、列表框、单选按钮、提交按钮等）供用户输入信息数据表单控件标记和表单form标记一起工作，共同发挥作用formaction=“”method=“post”用户名：inputtype=“text”name=“userName”/br/年龄：inputtype=“text”name=“age”/br/inputtype=“submit”//form表单标记各类表单控件标记示例form/form标记负责创建一个表单form标记的重要属性▪action属性指定表单数据提交至何处▪method属性指定表单数据提交的方式formaction=“url”method=“post”/form表单控件标记I▪input表单控件标记II▪select▪textarea表单控件标记嵌套在form标记之内，又称做“表单控件元素”或“表单元素”input▪input能够演变为表单中许多不同的控件标记，取决于type属性▪type取值：text(单行输入文本框)submit（提交按钮）password（密码输入文本框）radio（单选按钮）checkbox（复选框）reset(复位按钮)button（普通按钮）inputtype=“type值”name=“名称”/input输入文本框用来输入一行文本▪inputtype=“text”name=“名称”/type属性值为“text”的input标记在网页中创建一个单行文本框结束标记写法：input是空元素name属性：指定一个表单控件元素的名称inputtype=“text”name=“userName”/示例inputtype=“text”name=“userName”/input表单控件元素名称的作用▪当提交表单时，浏览器会使用表单控件元素的名称和表单控件元素的值来打包用户输入的数据，再发送给服务器用户名：用户名：inputtype=“text”name=“”/年龄：inputtype=“text”name=“age”/年龄：每个表单控件元素赋予一个名称Jack20userName=Jackage=20表单提交后，浏览器使用“表单控件元素名称=表单控件元素值”来打包所有数据服务器程序接收这样的数据后，能判断哪个文本框输入了何值，从而做出处理userName用户名：inputtype=“text”name=“userName”/年龄：inputtype=“text”name=“age”/用户名：年龄：Jack20userName=Jackage=20输入或选择的值表单提交后，浏览器使用“表单控件元素名称=表单控件元素值”来打包所有数据表单（控件）元素值：input输入文本框的value属性▪value属性：可以用来设置文本框的初始值inputtype=“text”name=“userName”value=“admin”/示例input提交按钮：创建一个用以提交表单的按钮▪inputtype=“submit”value=“提交”/type属性值：submitvalue属性值：指定按钮上显示文字，不指定，浏览器采取默认显示▪作用：点击提交按钮，浏览器将提交表单示例点击提交按钮会发生什么理解表单提交的目的▪提交表单中的数据理解表单提交时，浏览器会对表单中的数据进行打包▪打包形式：表单控件元素名=表单控件元素值理解打包的数据被提交至何处？▪表单form标记的action属性指定理解数据提交的方式▪表单form标记的method属性指定formaction=“”method=“post”用户名：inputtype=“text”name=“userName”/br/年龄：inputtype=“text”name=“age”/br/inputtype=“submit”//form点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打包表单中输入的数据，发送给action属性指定的服务器端程序，表单所在页面也相应跳转，如果action为空或不写，表示提交给当前页面①示例示例2action属性值：url地址相对或绝对路径表单action属性值是一个URL地址,一般指向服务器端一个程序,如JSP&Servlet,程序接收到表单提交过来的数据(即表单元素值),作相应处理理解表单提交的目的▪提交表单中的数据理解表单提交时，浏览器会对表单中的数据进行打包▪打包形式：表单控件元素名=表单控件元素值理解打包的数据被提交至何处？▪表单form标记的action属性指定理解数据提交的方式▪表单form标记的method属性指定formaction=“”method=“post”用户名：inputtype=“text”name=“userName”/br/年龄：inputtype=“text”name=“age”/br/inputtype=“submit”//form点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打包表单中输入的数据，发送给action属性指定的服务器端程序，表单所在页面也相应跳转，如果action为空或不写，表示提交给当前页面①②根据method属性值（get或post），浏览器发送打包数据的形式有所不同get方式：▪method属性值get▪浏览器在action指定的URL地址后以“？”形式带上打包数据，多个打包数据之间以&分隔▪形式：▪传递数据在url地址栏可见▪以get方式传递数据，传递数据量有限▪如果不指定method属性值，get是默认提交方式示例=value1&name2=value2示例post方式：▪method属性值：post▪浏览器将打包数据作为请求消息的实体内容进行发送，多个数据之间以&分隔▪传递数据在url地址栏不可见▪以post方式传递数据，传递数据量无限制示例表单提交的目的是为了提交表单中的数据表单提交时，浏览器会对表单中的数据进行打包，打包形式：表单控件元素名=表单控件元素值打包的数据被提交至表单form标记action属性指定的服务器端程序数据提交的方式由表单form标记的method属性指定，分get和post两种，get提交形式下的打包数据附在URL地址之后，post提交形式下的打包数据URL地址栏不可见查看百度，提交搜索关键词=JavaEE提交之后，地址栏变为表单控件元素没指定name属性值，表单提交时，该控件元素不被提交示例inputtype=“password”name=“名称”/▪输入的文本显示为密码形式▪GET提交方式？示例inputtype=“hidden”name=“名称”/▪在页面中不显示示例input单选按钮元素▪type值为radio:inputtype=“radio”name=“名称”/▪value属性：元素值inputtype=“radio”name=“gender”value=“male”/▪具有相同name的多个单选按钮称为单选按钮组，一次只能有一项被选中提交表单时，选中项的value和name被打包发送inputtype=“radio”name=“gender”value=“male”/inputtype=“radio”name=“gender”value=“female”/示例示例通常用法：使用name相同的一组单选按钮▪name不同，起不到单选按钮组的作用单选按钮的元素值由value属性显式设置，表单提交时，选中项的value和name被打包发送▪不显式设置value示例示例input复选按钮元素▪type值checkbox:inputtype=“checkbox”name=“名称”/▪value属性：元素值inputtype=“checkbox”name=“like”value=“Java”/▪具有相同name的多个复选按钮称为复选按钮组，一次可以选择多项提交表单时，所有选中项的value和name被打包发送：like=java&like=Webinputtype=“checkbox”name=“like”value=“Java”/inputtype=“checkbox”name=“like”value=“C”/inputtype=“checkbox”name=“like”value=“Web”/示例示例通常用法：使用复选按钮组，即name相同的一组复选按钮复选按钮表单元素的元素值由value属性显式设置，表达提交时，所有选中项的value和name被打包发送▪不显式设置value示例单选按钮、复选按钮的checked属性▪可以通过checked属性为单选按钮、复选按钮设置默认选中项▪HTML中有一类属性，取值只有“是”或“不是”两种状态，对于此类属性，需要取肯定值时，在标记中加上即可，否则不加inputtype=“radio”name=“gender”value=“male”checked/inputtype=“radio”name=“gender”value=“female”/示例inputtype=“reset”value=“按钮显示文字”/▪将表单元素值恢复为初始默认值示例inputtype=“button”value=“按钮显示文字”/▪显示为一个普通按钮▪通常和javascript代码配合使用示例多行文本框标记textarea列表框标记selecttextarea创建一个可输入多行文本的文本框▪rows,cols属性：指定行数、列数，不指定则浏览器采取默认显示▪textarea没有value属性标记之间可以放置文本作为显示的初始值用户输入textareaname=“名称”rows=“行数“cols=“列数”多行文本框的初始显示内容/textarea示例示例2select标记创建一个列表框▪option标记创建一个列表项▪select与嵌套的option一起使用，共同提供在一组选项中进行选择的方式selectname=“province”optionvalue=“anhui”安徽option/optionvaue=“beijing”北京/optionoptionvalue=“xizang”西藏/option/select列表框名称一个option选项option不需要name表单提交时，select名称和选中项option的value被打包发送selectn