第10篇：网页中表单的使用（html）
程序员文章站
2022-07-14 14:50:03
...
表单概述
表单处理过程:单击表单中的提交按钮时，在表单中输入的信息就会被提交到服务器，服务器的有关应用程序将处理提交信息，处理结果或者是将用户提交的信息存储在服务器的数据库中，或者将有关信息返回到客户端的浏览器上。
表单功能实现需要两个部分:用于描述表单对象的HTML源代码;客户端的脚本或者服务器端用户处理用户所填写信息的程序。
表单标签
表单标签<form>
输入标签<input>
选择列表标签
多项选择列表
<select name="fruit" id=""size="3" multiple="multiple">
<option value="grape">葡萄</option>
<option value="cantaloupe" selected="selected">哈密瓜</option>
<option value="strawberry">草莓</option>
<option value="passionfruit"selected="selected">百香果</option>
</select>下拉列表
<select name="" id="">
<option value="grape">葡萄</option>
<option value="cantaloupe">哈密瓜</option>
<option value="strawberry">草莓</option>
<option value="passionfruit">百香果</option>
</select>文本域标签
基本语法:<textarea name="文本域名称" rows="行数" cols="字符数"></textarea>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单的使用</title>
</head>
<body>
<form name="info" method="post">
姓名:<input type="text" maxlength="15" size="10"/>
<br />
tel:<input type="text" maxlength="15" size="15"/>
<br />
密码:<input type="password" />
<br />
性别：
<input type="radio" checked="checked" name="sex"/>男
<input type="radio" name="sex"/>女
<br />
个人简介：
<input type="file" />
<br />
兴趣：
<input type="checkbox" checked="checked"/>游泳
<input type="checkbox" />射箭
<input type="checkbox" />骑马
<br />
<input type="hidden" name="域名称" value="域值"/>
<br />
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<br />
留言板：
<textarea name="liu" rows="5" cols="30">请输入留言....
</textarea>
<br />
<input type="button" value="留言提交"/>
<br />
<input type="image" src="../img/bg.JPG" width="60" height="30"/>
</form>
<br />
<br />
<br />
<hr />
<form name="sel" action="">
选择水果：
<select name="fruit" id=""size="3" multiple="multiple">
<option value="grape">葡萄</option>
<option value="cantaloupe" selected="selected">哈密瓜</option>
<option value="strawberry">草莓</option>
<option value="passionfruit"selected="selected">百香果</option>
</select>
<hr />
选择你最喜欢的水果：
<select name="" id="">
<option value="grape">葡萄</option>
<option value="cantaloupe">哈密瓜</option>
<option value="strawberry">草莓</option>
<option value="passionfruit">百香果</option>
</select>
</form>
</body>
</html>
上一篇： HTML5新手入门教程，手把手教你使用记事本编写一个网页
下一篇： gdal不同导入方式的区别