表单

发送和重置 文字和密码 单选框和复选框 选择菜单框 文本区域

 

发送与重置
标记格式为:
<input type=submit value=#>
<input type=reset value=#>
其中,type为按纽的动作属性,
前者为发送按纽,#代表按纽上显示的文本,如“发送表单”等
后者为重置按纽,#代表按纽上显示的文本,如“重新填写”等

文字的输入和密码输入
标记为:<input type=* size=n1>
其中*为text或者password
n1为文本框的长度
例如:
<html>
<head>
<title>表单</title>
</head>
<body>
这是表单的实例:
<form action=post method=post>
这里输入你的姓名:<input type=text name=姓名 size=10><br>
这是输入你的电子邮件地址:<input type=text name="电子邮件地址" size=10><br>
在这里输入你的主页网址:<input type=txet name=主页 size=10><br>
在这里输入你的密码:<input type=password name=密码 size=10><br>
<input type=submit value="发送表单">
<input type=reset value="重新填写">
</form>
</body>
</html>
浏览效果如图:

单选框和复选框
单选框(Checkbox)标记格式:
<input type=checkbox>
<input type=checkbox checked>
其中,加入checked表示该复选框在网页下载之后呈选中状态。
例如:
<html>
<head>
<title>表单实例二</title>
</head>
<body>
这是复选框的实例:
<form action=post method=post>
<input type=checkbox name=book1>HTML基础<p>
<input type=checkbox checked name=book2>编程基础<p>
<input type=submit value="发送表单">
<input type=reset value="重新填写">
</form>
</body>
</html>
浏览效果如图,其中第二项呈现选中状态。

(2)单选框(radioButton)
格式标记为:
<input type=radio>
<input type=radio checked>
例如:
<heml>
<head>
<title>表单实例三</title>
</head>
<body>
这是单选框的实例:
<form action=post method=post>
<input type=radio name=book1>HTML基础<p>
<input type=radio name=book2 checked>编程基础<p>
<input type=submit value="发送表单">
<input type=reset value="重新填写">
</form>
</body>
</html>
显示效果如图:

选择菜单框
选择菜单框(Selectable Meau)标记格式为:
<select name=*>
<option>……</option>
</select>
若<Option>标记变为<option selected>
例如:
<html>
<head>
<title>选择菜单框</title>
</head>
<body>
这是选择菜单框的实例:
<form action=post method=post>
<select name=book>
<option>HTML基础
<option selected>编程基础
</select><P>
<input type=submit value="发送表单">
<input type=reset value="重新填写">
</form>
</body>
</html>
显示效果如图:

文本区域
标记格式为:
<textarea name=* rows=** cols=**>……</textarea>
其中rows和cols分别是高度和宽度,单位是字数。
例如:
<html>
<head>
<title>文本输入</title>
<body>
这是文本区的实例,在文本区中可以输入浏览者的意见等内容:
<form action=post method=post>
<textarea name=commet rows=5 cols=60>
</textarea>
<P>
<input type=submit value="发送表单">
<input type=reset value="重新填写">
</form>
</body>
</html>
显示效果如图