html网页表单制作
1.表单标签,form,„„,/form,
语法:,FORM name=“form_name” ACTION=“URL” METHOD=“GET|POST”,„,/FORM,
Name :定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式,默认参数为:get ; Action :用来指定表单处理程序的位置(asp 等服务器端脚本处理程序) 2.文本框文本框
是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。
代码格式:,input type=“text” name=“...” size=“...” maxlength=
“...” value=“...”,
type=“text” 定义单行 文本输入框;
name 属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一
无二的名称;
size 属性定义文本框的宽度,单位是单个字符宽度;
maxlength 属性定义最多输入的字符数。
value 属性定义文本框的初始值
3.密码框
密码框是一种特殊的文本框,它的不同之处是当输入内容时,均以*表示,
以保证密码的安全性。
格式:<input type=“password” name=“...” size=“...” maxlength=
“...” >
4. 按钮
类型:普通按钮、提交按钮、重置按钮。
1) 普通按钮
当type 的类型为button 时,表示该输入项输入的是普通按钮。
语法格式: <input type="button" value="„“ name=“„”>
Value: 表示显示在按钮上面的文字。 普通按钮经常和脚本一起使用。
2) 提交按钮
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里
action所指向的文件。 例句: <input type="submit" value="提交">
3) 重置按钮
当type的类型为reset时,表示该输入项输入的是重置按钮,单击按钮后,
浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。
语法格式: <input type=“reset" value=“„“ name=“„”> 5. 单选框和复选框
, 单选框
格式:<input type=“radio”name=“„” value=“„” checked>
Checked: 表示此项默认选中
Value 表示选中后传送到服务器端的值。
Name 表示单选框的名称,如果是一组单选项,name 属性的值相同有互斥效
果。
, 复选框
语法格式:<input type=checkbox name=“„” value=“„” checked >
Checked: 表示此项默认选中
Value 表示选中后传送到服务器端的值。
textarea中cols表示Name 表示复选框的名称,如果是一组单选项,name 属性的值相同亦不会有互斥效果。
6. 文件输入框
当type=“file”时,表示该输入项是一个文件输入框,用户可以在文件输入框的内部填写自己硬盘中的文件路径,然后通过表单上传。 语法格式:<input type=“file” name=“„”>
7.下拉框 (Select) 既可以用做单选,也可以用做复选。
单选例句如下 :
<select name="fruit" >
<option value="apple"> 苹果
<option value="orange"> 桔子
<option value="mango"> 芒果
</select>
如果要变成复选,加multiple即可 。用户用Ctrl来实现多选。 <select name="fruit" multiple>,用户还可以用size 属性来改变下拉框的大小。
8. 多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下 <textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols 表示textarea 的宽度,rows 表示textarea 的高度。 实例一:
代码:
<html>
<head><title>用户登记</title></head> <body>
<table border=3 width=1000 height=500 bordercolor="#336699"
align=center>
<tr>
<td>
<p align=center><font size=7 color="#00ff00">用户登记</font></p><hr >
<p align=center>亲爱的用户,欢迎您访问我们的网站,请填写您的个人信息,便于我们及时与您联系。</p>
<form>
<p>姓名:<input type=text name=xing ming><br><br>年龄:<input type=text name=nian ling><br><br>性别:<input type=radio
name=xingbie value=femal checked>男<input type=radio
name=xingbie value=mal>女</p>
<p>文化程度:<select name=wnhua size=1> <option value="xiaoxue" selected>小学
<option value="高中">高中
<option value="大学">大学
</select>
职业:<select name=zhiye>
<option value=yiliao selected>医疗
<option value=gongwuyuan>公务员
<option value=zaiduxuesheng>在读学生
</select>
E-mail:<input type=text name=mail></p>
<p>你的爱好:</p>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。