表单概述
Form表单时HTML的一个重要部分,负责采集和提交用户输入信息。表单主要分为表单标签和表单控件两大类。表单控件又可以细分为表单域和按钮两部分,常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等。
表单标签
表单标签是一个包含表单元素的区域,可以包含一些表单控件,还可以包含其他的HTML标签(表格、段落、标题等等)。一个页面可以拥有一个或多个表单标签,标签之间相互独立,不能嵌套。
*表单域
表单域多用于收集网站访问者的信息,一般位于< form>< /form>标签之间。表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素。除多行文本框(< textarea>)和列表选择框(< select>)外,大部分表单域使用< input>标签来创建。
单行文本框
单行文本框通常用来输入一些简单的内容。在HTML中,通过将< input>标签的text方式来创建一个单行文本框。
<body>
<form >
<input type="text" name="Username" id="uaername" value="请输入用户名"><br/><br/>
<input type="text" value="请输入用户名" size="25" maxlength="10"><br/><br/>
<input type="text" value="请输入用户名" `disabled="disabled"`><br/><br/>
<input type="text" value="请输入用户名" readonly="readonly">
</form>
</body>
disabled="disabled" 用于指明为文本框的禁用状态,并呈灰色显示。
readonly="readonly" 用于指定文本框的只读状态。
密码框
<input type="passward" name="..." size="..." maxlength="..." value="..."/>
type="password"用于指明表单域的类型是密码框。
name属性用于指定密码的名称。
size属性用于指定密码框的宽度,单位为字符的个数。
maxlength属性用于指定密码框的最多输入字符的个数。
value属性用于指定密码框的初始值,以掩码的方式显示。
<body>
<form >
用户名:<input type="text" value="请输入用户名"><br/><br>
密码: <input type="password" size="6" maxlength="12" ><br/><br>
确认密码:<input type="password" size="6" maxlength="12" value="请再次输入密码">
</form>
</body>
单选按钮
<input type="radio" name="..." value="..." checked="checked">
- type="radio"用于表明表单域的类型是单选按钮。
- name属性用于指定单选按钮的名称。
- 具有相同name属性的单选按钮分为一组,一组只能选择一项。
- value属性用于指定该项的值,同一组内的值不应该相同。
- checked="checked"属性用于指定该项默认被选中,也可以简写成checked格式。
当表单中有多个单选按钮时,浏览器会根据单选按钮的name属性进行分组。
<body>
<form >
性别:<input type="radio" name="sex" value="male" checked="checked">男 <input type="radio" name="sex" value="female" >女<br>
专业:<input type="radio" name="majop" value="computer">计算机 <input type="radio" name="major" value="chemical">化工 <input type="radio" name="major" value="art">艺术
</form>
</body>
复选框
<input type="checkbox" name="..." value="..." checked="checked">
- type="checkbox"用于指明表单域的类型是复选框。
- name属性用于指定复选框的名称。
- value属性用于指定该项的值。
- checked="checked"属性用于指定该项默认被选中,也可以简写成checked格式。
当复选框有多项数据时,浏览器会根据复选框的name属性进行分组,分组前后在页面显示方面并没有差别,但在使用JavaScript特效或向服务器提交数据时,需要对复选框进行合理分组,一边对数据进行处理。
<body>
<form >
爱好:<input type="checkbox" name="hobby" value="music">音乐<input type="checkbox" name="hobby" value="art">美术<input type="checkbox" name="hobby" value="piano">弹钢琴<input type="checkbox" name="hobby" value="chess">下棋 <br><br>
选修:<input type="checkbox" name="class" value="computer" checked>计算机<input type="checkbox" name="class" value="movie">电影鉴赏<input type="checkbox" name="class" value="music">音乐鉴赏<input type="checkbox" name="class" value="books">阅读课<input type="checkbox" name="class" value="football">足球课
</form>
</body>
文件选择框
<input type="file" name="..." accept="...">
- type="file"用于指明表单域的类型时文件选择框。
- name属性用于指定文件选择框的名称。
- accept属性用于指定文件选择窗口的文件类型过滤。单击选择文件按钮时,会在弹出的文件选择窗口中,根据accept指定的类型对文件自动进行过滤,例如,图片的格式包括image/gif、image/jpeg、image/*等格式。
使用文件选择框是,form表单的enctype属性应设为multiparty/form-data类型,method属性应设为post类型。
<body>
<form >
请选择上传的头像:<input type="file" name="youxiang" accept="image/*">
</form>
</body>
隐藏域
<input type="hidden" name="..." value="...">
- type="hidden"用于指明表单域的类型是隐藏域,该控件不在页面中显示。
- name属性用于隐藏域的名称。
- value属性用于指定隐藏域的值。
在浏览器中,隐藏于并不会显示出来。但在网页的源代码中可以找到相应代码.
多行文本框
多行文本框是用来输入较长内容的文本输入控件。
<textarea name="..." rows="..." cols="..." wrap="...">文本内容</textarea>
- 多行文本框使用< textarea>标签进行定义,文本内容放在这个给标签之内。
- name属性用于指定多行文本框的内容。
- rows属性用于指定多行文本框的行数
- cols属性用于指定多行文本框的密度,单位是字符。
- wrap属性用于指定文本内容大于文本密度的显示方式。
<body>
<textarea name="文本" id="" cols="30" rows="3" wrap="virtual">
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111</textarea>
</body>
列表选择框
<select name="..." size="..." multiple="multiple">
<option value="..." selected="selected">选项内容描述</option>
<select>
按钮控件
表单的按钮有多种功能:可以用于他提交表单,也可以用于清楚或重置表单,甚至能用于出发客户端脚本程序。按钮分为提交按钮、重置按钮、图片按钮和普通按钮。可以通过< input>或< button>标签创建按钮。
<input type="sumit|reset|button|image" name="..." value="...">
表单分组