JavaWeb第二章HTML与CSS网页04

HTML表单标记

表单在HTML页面中很重要，是用户与网页交互信息的重要手段。例如：注册登录界面

1、<form>...</form>表单标记

表单标记以<form>开头，以</form>结尾。在表单标记中可以定义处理表单数据程序的URL地址信息。

<form>标记的基本语法如下

<form action ="url" method = "get"|"post" name = "name" onSubmit ="" target = "">

</form>

属性说明

①action属性：用来指定处理表单数据程序的URL地址

②method属性：该属性用来指定数据传送到服务器的方式。它有两种属性值，分别为get与post。

get属性值表示将输入的数据追加在action指定的地址后边，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中的post传输方式传送到服务器。

③name属性：该属性指定表单的名称，可以自行指定。

④onSubmit属性：该属性用于指定用户单击提交按钮时触发的事件。

⑤target属性：该属性指定输入数据结果显示在哪个窗口中。

其属性值可以设置为_blank、_self、_parent和_top；其中_blank表示在新的空白页打开；_self表示在同一个窗口中

打开，此项一般不用设置；_parent表示在上一级窗口中打开；_top表示在浏览器的整个窗口中打开，忽略所有框架

下面的例子为创建表单，设置表单名称为form，当用户提交表单时，提交至action.html页面进行处理

2、<input>表单输入标记

表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加但行文本、多行文本，按钮等。

<input>标记的语法格式如下：

<input type = "image" disabled = "disabled" checked ="checked" width ="digit" height ="digit" maxlength ="digit" readonly =""

  size = "digit" src = "uri" usemap ="uri" alt = "" name = "checkbox" value ="checkbox">

其中，type属性决定了输入数据的类型，分别为：

①text：文本框     ②password：密码框 ③file：文件域 ④radio:单选框 ⑤checkbox：复选框 

⑥submit：提交按钮 ⑦reset：重置按钮 ⑧button：普通按钮 ⑨hidden：隐藏域 ⑩image：图像域

<input>标记的其他属性可自行百度。

案例：在文件中应用<form>添加一个表单，将表单的action属性设置为register_deal.jsp，method属性设置为post，然后应用<input>标记添加获取用户名和E-mail的文本框、获取密码及确认密码的密码域，选择爱好的复选框、提交按钮、重置按钮。

3、<select>...</select>下拉列表框标记

<select>标记可以在页面中创建空下拉列表框，可以使用<option>标记添加子项、

<seect name= "name" size="digit" multiple="multiple" disabled="disabled">

</select>

4、<textarea>多行文本标记

<textarea>为多行文本标记。相对于单行文本相比，多行标记可以输入更多内容。通常<textarea>标记出现在<form>标记的标记内容中。

语法格式如下：

<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值

</textarea>

name：用于指定多行文本的名称

cols：指定多行文本的列数

rows：指定多行文本的行数

disabled：用于指定当前多行文本不可使用（变成灰色）

readonly：用于指定当前多行文本框为只读

wrap：用于设置多行文本中的文字是否自动换行，可选值如下：

1、hard：默认值，表示自动换行，如果文字超过cols属性所指的列数就自动换行，并且提交到服务器时自动换行符同时被提交。

2、soft：表示自动换行，如果文字超过cols属性所指的列数就自动换行，但是提交到服务器时换行符不被提交。

3、off：表示不自动换行，如果想让文字换行，只能按下Enter键强制换行。