HTML的表单标记

一.HTML的表单标记

        表单是实现动态网页的一种主要的外在形式,是HTML页面与浏览器端实现交互的重要手段。这里只介绍如何使用HTML的表单标记来设计表单的外表。

表单信息的处理过程为:当单击表单中的“提交”按钮时,在表单中输入的信息就会从客户端的浏览器上传到服务器中,然后由服务器中的有关表单处理程序(ASP,CGI等程序)进行处理,处理后或者将用户提交的信息储存在服务器端的数据库中,或者将有关的信息返回到客户端浏览器中,这样网页就具有了交互性。这里只介绍如何使用HTML的表单标记来设计表单的外表。

1.表单标记<form>

格式:<form name='form__name'

action='url' methond='get|post'>....</form>

表单标记<form>中包含的表单

标记主要有input,select(option),textarea等。

2.输入标记<input>

<input>用来收集用户的输入信息,是一个单标记,其含义由type属性决定。

格式:<input name='field__name'

type='type__name'/>

常用的type属性值有10种,下面分别介绍。

1️⃣:文本域text用来设定单行的输入文本区域。格式:<input type='text'

maxlength='value' size='value' value='field_value'/>,期中:maxlength为文本域的最大输入字符数:size为文本域的宽度;value用于设置文本域的初始默认值。

2️⃣:密码域password在表单中还有一种文本域的形式为密码域,输入到文本域中的文字均以星号"*"或圆点表示。

        格式:<input type='password' maxlength='value' size='value'/>

3️⃣:文件域file用于浏览器通过form表单想web服务器上传文件。

        格式:<input type='file'/>.

4️⃣:单选按钮radio用于在表单上添加单选按钮。

        格式:<input type='radio' checked value='value'/>,其中:checked表示此项被默认选中:value表示选中项目后传送到服务器端的值,同组中的每个单选按钮的value属性值必须各不相同。

5️⃣: 复选框checkbox用于在表单上添加一个复选框。复选框可以让用户选择一项或多项内容。

        格式:<input type='checkbox' checked value='value'/>

6️⃣:普通按钮button,普通按钮主要是用来配合程序(如JavaScript脚本)的需要来进行表单的处理。

        格式:<input type='bottom' value='button_text'/>,其中:value值代表显示在按钮上面的文字。

7️⃣:“提交”submit,单击“提交”按钮后,可以实现表单内容的提交。

        格式:<input type ='submit' value='button_text'/>

8️⃣:“重置”按钮reset,单击“重置”按钮后,可以清除表单内的内容,恢复默认的表单内容设定。

        格式:<input type='reset' value='button_text'>

9️⃣:图像按钮image用于在表单上添加一张图片做按钮,其功能和提交按钮相同

        格式:<input type ='image' src='image_url'/>

⑩:隐藏域hidden用于在表单上添加一个隐藏的表单字段元素。

        格式:<input type='hidden'/>

3.下拉列表框和列表框标记<select>和<option>

下拉列表框正常状态下只能看到一个选项,单击按钮打开列表后才能看到全部的选项;列表框可以显示一定数量的选项,如果超出了这个数量,会自动出现滚动条,浏览者可以通过滚动条来观看各选项。

格式:<select name='name' size='value' multiple><option value='value' selected>选项一</option><optionvalue='value'>选项二</option>.....</select>

<select>标记用来定义下拉列表框或列表框,属性如下。

1️⃣:name:设置下拉列表框或列表框的名称。

2️⃣:size:如果没有设置size属性,那么表示为下拉列表框;如果设置了size属性则变成了列表框。

3️⃣:multiple:该属性不用赋值可直接加入到标记中,在列表框时再加上mutiple属性表示列表框允许多选,否则只能单选。

        <option>标记用来指定下拉列表框或列表框中的一个选项,它放在<select></select>标记对之间。属性如下:

        1.value:该属性用来给<option>指定的选项赋值,这个值是要传送到服务器上的,服务器正是通过调用<select>区域名字的value属性来获得该域选中的数据项。

        2.selected:指定初始默认的选项。

4.多行文本域标记<textarea>

用于创建一个可以输入多行的文本框。

格式:<textarea name='name'

rows='value'

cols='value'>

</textarea>

 

 


版权声明:本文为sinat_58088248原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。