一.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>