HTML：表单和按钮

迷南。 2024-03-26 21:24 88阅读 0赞

表单：

表单标签的基本语法：

<form action=”处理数据程序的URL地址” method=”get|post” name=”表单名称”>……</form> 其中：

·属性action、method和name是<form>标签常用的三个属性；  
·action属性用于指定服务器端用来处理表单的程序的URL地址；当提交表单时，使用action属性指定的服务器端程序来处理数据，多用于动态交互性网站开发；

method属性用于指定以何种方式向服务器端发送数据；

name属性指明该表单的名称。

表单标签的属性

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">属性</p> </td> 
   <td style="border-color:#000000;width:11cm;"> <p style="margin-left:0;text-align:center;">描述</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">action</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">当提交表单时，说明向何处发送表单中的数据</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">accept</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">服务器能够处理的内容类型列表，用逗号隔开；目前主流浏览器并不支持，且在HTML5中不再支持</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">accept-charset</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">服务器可处理的表单数据字符集</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">enctype</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">表单数据内容类型，说明在发送表单数据之前如何对其进行编码，取值可为application/x-www-form-mlencoded、multipart/form-data、text/plain</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">name</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">设置表单对象的名称</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">id</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">设置表单对象的唯一标识符</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">method</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">规定向服务器端发送数据所采用的方式，取值可以为get、post</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">onsubmit</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">向服务器提交数据之前，执行其指定的JavaScript脚本程序</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">onreset</p> </td> 
   <td style="width:11cm;"> <p style="margin-left:0;text-align:justify;">重置表单数据之前，执行其指定的JavaScript脚本程序</p> </td> 
  </tr> 
 </tbody> 
</table>

## 表单域： ##

表单域多用干收集网站访问者的信息，一般位于<form></form>标签之间。表单域主要包播文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素。除多行文本框(<textarea>)和列表选择框(<select>)外，大部分表单域使用<input>标签来创建。

<input>标签的通用属性

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">属性</p> </td> 
   <td style="border-color:#000000;vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:center;">描述</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">Id</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置当前控件的唯一ID。界面设计时在CSS、JavaScript中可以引用</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">name</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置当前控件的名称。在向服务器发送数据时，服务器根据name属性获取对应表单域的值</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">value</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置表单域的初始值。网页加载过程中，默认显示该值</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">type</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">该属性是必需的，用来说明当前控件的类型。取值可以是text(单行文本框)、password(密码框)、radio(单选框)、checkbox（复选框）、file(文件选择框)、hidden(隐藏域)、button、submit,reset,image等</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">maxlength</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置输入到文本框的最大字符数。输入达到最大数后，用户按下更多键，也不会添加新的字符</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">size</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置文本输入控件的宽度，单位为字符</p> </td> 
  </tr> 
 </tbody> 
</table>

## **单行文本框：** ##

语法：<input type="text" name="…" size="…" maxlength="…." value="…" disabled="disabled" readonly ="readonly"/>  
其中：  
type="text"用于指明表单域的类型是单行文本框；

name属性用于指定文本框的名称；  
size属性用于指定文本框的宽度，单位是字符；  
maxlength属性用于指定文本框的最多输入字符的个数；

value属性用于指定文本的初始值；  
disabled="disabled"用于指明文本框的禁用状态，并呈灰色显示；

readonly="readonly"用于指定文本框的只读状态。

## **密码框：** ##

语法：<input type="password" name="…" size="…" maxlength="…" value="…"/>

其中：  
type="password"用于指明表单域的类型是密码框；

name属性用于指定密码的名称；  
size属性用于指定密码框的宽度，单位为字符；  
maxlength属性用于指定密码框的最多输入字符的个数；

value属性用于指定密码框的初始值，以掩码的方式显示。

## **单选按钮：** ##

语法：<input type="radio" name="…" value="…" checked="checked"/>  
其中：  
type="radio”用于指明表单域的类型是单选按钮；  
name属性用于指定单选按钮的名称；

具有相同name属性的单选按钮分为一组，一组只能选择一项；  
value属性用于指定该项的值，同一组内的值不应相同；  
checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式。

## **复选框**： ##

语法：<input type=”checkbox” name ="...” value ="...” checked ="checked"/>

其中：  
type="checkbox用于指明表单域的类型是复选框；

name属性用于指定复选框的名称；  
具有相同name属性的复选框分为一组，组内允许多选；

value属性用于指定该项的值；  
checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式。

##    **文件选择框**： ##

语法：<input type="file" name="…" accept="…"/>

其中：  
type="file"用于指明表单域的类型是文件选择框。

name属性用于指定文件选择框的名称。  
accept属性用于指定文件选择窗口的文件类型过滤。单击选择文件按钮时，会在弹出的文件选择窗口中，根据accept指定的类型对文件自动进行过滤，例如，图片的格式包括image/gif、image/jpeg、image/\*等格式。  
使用文件选择框时，form表单的enctype属性应设为multipart/form-data类型，method属性应设为post类型。

## **隐藏域**： ##

语法：<input type="hidden" name="…" value=".…"/>  
其中：  
type="hidden"用于指明表单域的类型是隐藏域，该控件不在页面中显示；  
●name属性用于指定隐藏域的名称；  
●value属性用于指定隐藏域的值。

##    **多行文本选择框**： ##

语法：<textarea name="…" rows="…" cols="…" wrap=”…">文本内容</textarea>  
其中：  
多行文本框使用<textarea>标签进行定义，文本内容放在<textarea>、</textarea>之间；  
name属性用于指定多行文本框的名称；

rows属性用于指定多行文本框的行数；  
cols属性用于指定多行文本框的宽度，单位是字符；  
wrap属性用于指定文本内容大于文本宽度时的显示方式。

属性值表

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:4cm;"> <p style="margin-left:0;text-align:center;">值</p> </td> 
   <td style="border-color:#000000;vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:center;">描述</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">off</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">默认值，文本域中内容足够多时，会在文本域中添加滚动条</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">virtual</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">实现文本区内的自动换行，以改善对用户的显示；但在传输给服务器时，文本只在用户按下Enter键的地方进行换行，其他地方没有换行的效果</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">physical</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">实现文本区内的自动换行，并以这种形式传送给服务器</p> </td> 
  </tr> 
 </tbody> 
</table>

##    **列表选择框**： ##

语法：<select name=”…” size=”…” multiple=”…”>

<option value=”…” selected=”selected”>选项描述内容</option>

…

</select>

其中：  
列表选择框使用<select>标签进行定义，一个列表可以包含多个列表项<option>,列表项需要放在<select></select>之间；

name属性用于指定列表选择框的名称；  
size属性用于指定列表选择框显示的行数；  
multiple="multip;"属性用于指明当前列表框是否允许按住Ctrl键进行多选，不设置该属性时，默认只能选择一项；  
<option>标签的value属性多用于发送给服务器的选项值；  
·<option>标签的selected="selected"用于设置当前选项默认被选中；  
<option>和</option>标签之间的选项描述内容是显示的列表选择项。

标签<select>的属性列表

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;vertical-align:top;width:4cm;"> <p style="margin-left:0;text-align:center;">属性</p> </td> 
   <td style="border-color:#000000;vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:center;">描述</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">name</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置列表的名称</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">size</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置列表中可见选项的数目</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">multiple</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置列表是否可以选择多个选项，可以使用multiple或multiple=”multiple;”形式；允许选择时，需要按下Ctrl键选择多项</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;width:4cm;"> <p style="margin-left:0;text-align:center;">disabled</p> </td> 
   <td style="vertical-align:top;width:11cm;"> <p style="margin-left:0;text-align:justify;">设置列表是否被禁用，可以使用disabled或disabled="disabled;形式</p> </td> 
  </tr> 
 </tbody> 
</table>

标签<option>的属性列表

HTML中提供了<optgroup>标签，用于对列表项进行分组。该标签的label属性用于指  
定每个分组的名称，且分组名不能被选择；disabled属性用于设置该分组是否被禁用。

## **按钮控件**： ##

可以通过<input>标签或<button>标签创建按钮。  
语法：<input type="submit |reset |button |image" name ="...” src="..." value="..."/>  
其中：  
type属性用于决定按钮的类型，取值为submit、reset、button或image.。

submit表示创建一个能够提交表单的按钮；

reset表示创建一个能将表单重置为初始化状态的按钮；

button表示创建一个普通按钮，当用户单击按钮时，可以触发JavaScript脚本的按钮；

image:表示创建一个图片按钮，单击时也可以提交表单。

name属性用于指定按钮的名称。  
src属性是可选的，当type属性为image时，用来指定图片的URL地址。  
value属性用于指定按钮上显示的文字内容。

还可以用<button>标签创建一个按钮，语法：

<button type=”submit|reset|button” value=”…” name=”…”>正文内容</button> 其与<input>标签相比，提供了更强大的功能和更丰富的内容。

## **表单分组** ##

常见的分组标签有<fieldset>和<legend>标签。

示例：  
<form>  
<fieldset>  
<legend>请选择个人爱好</legend>

表单控件…  
</fieldset>  
</form>  
<fieldset>标签可以看作表单的一个子容器，将所包含的内容以边框环绕方式显示；<legend>标签则是为<fieldset>边框添加相关的标题。