php表单之在Web页面中插入表单

伊谢尔伦 原创: 2023-03-07 14:36:01 2108浏览

在普通的WEB页面中插入表单是如下的：这里将创建一个比较完整的表单, 将<form>中的元素和属性全部基本全部都展示出来。

首先在HTML的<body></body>标记中添加一个<form>表单。

然后再<form>表单中添加一系列的表单元素和属性。这里在表单的标记中给增加了一些CSS的样式，这样让朋友们感官上看上去页面更炫酷一些。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
  <table width="400" border="1" cellpadding="1"  bgcolor="#999999">
    <tr bgcolor="#FFCC33">
      <td width="103" height="25" align="right">姓名：</td>
      <td height="25">
        <input name="user" type="text" id="user" size="20" maxlength="100">
      </td>
    </tr>
    <tr bgcolor="#FFCC33">
      <td height="25" align="right">性别：</td>
      <td height="25" colspan="2" align="left">
        <input name="sex" type="radio" value="男" checked>男
            <input name="sex" type="radio" value="女" >女
         </td>
    </tr>
    <tr bgcolor="#FFCC33">
      <td width="103" height="25" align="right">密码：</td>
      <td width="289" height="25" colspan="2" align="left">
        <input name="pwd" type="password" id="pwd" size="20" maxlength="100">
      </td>
    </tr>
    <tr bgcolor="#FFCC33">
      <td height="25" align="right">学历：</td>
      <td height="25" colspan="2" align="left">
        <select name="select">
          <option value="专科">专科</option>
          <option value="本科" selected>本科</option>
          <option value="高中">高中</option>
        </select>
      </td>
    </tr>
    <tr bgcolor="#FFCC33">
      <td height="25" align="right">爱好：</td>
      <td height="25" colspan="2" align="left">
        <input name="fond[]" type="checkbox" id="fond[]" value="音乐">音乐
            <input name="fond[]" type="checkbox" id="fond[]" value="体育">体育
            <input name="fond[]" type="checkbox" id="fond[]" value="美术">美术
         </td>
    </tr>
    <tr bgcolor="#FFCC33">
      <td height="25" align="right">照片上传：</td>
      <td height="25" colspan="2">
        <input name="image" type="file" id="image" size="20" maxlength="100">
      </td>
    </tr>
    <tr bgcolor="#FFCC33">
      <td height="25" align="right">个人简介：</td>
      <td height="25" colspan="2">
        <textarea name="intro" cols="30" rows="10" id="intro"></textarea>
      </td>
    </tr>
    <tr align="center" bgcolor="#FFCC33">
      <td height="25" colspan="3">
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
      </td>
    </tr>
  </table>
</form>
</body>
</html>

说明：该表单包括了常用表单元素：单行文本框、多行文本框、单选项（radio）、多选项（checkbox），以及多选菜单。

maxlength是与姓名，密码文本框关联的属性，它限制用户输入密码的最大长度为100个字符。

列表框是列表菜单，它的命名属性下都有自己的值供选择。selected是一个特定的属性选择元素，如果某个option附加有该属性，在显示时就把该项列为第一项显示。

intro文本框中的内容，按照rows和cols显示文字、行和列宽。

checked标签是指单选项和多选项中的某个值，默认已经被选择。

将该文件保存为index.php页。

上面文件中的form表单使用的是POST方法传递数据，所以用户提交的数据会保存到$_POST或$_REQUEST的超级全局数组中，我们根据$_POST数组中的值就可以处理提交的数据。在后面我们会详细介绍获取表单数据的方法，POST方法是其中之一，在method="post"中选择。获取表单数据时表单是应用中最基本的操作，所以请朋友们关注表单后面的课程介绍。

注意：由于该页未使用PHP脚本，因此该Web页属于静态页，可以将其保存为 .html格式，然后直接使用浏览器打开该文件查看运行结果即可。

在浏览器中输入地址，按回车键，运行结果如下：