创建HTML的表单_html怎么创建表单-优快云博客

本文链接：https://blog.youkuaiyun.com/2502_90923624/article/details/146769585

今天我给大家分享如何创建HTML的表单。

<!--上图用户注册表单代码如下-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单制作</title>
</head>
<body>
    <form action="" method="post" name="form1">
        <h2 align="center" style="color: red;">用户注册</h2>
        <table width="500" border="1"  align="center" bordercolor="red" bgcolor="pink">
          <tr>
            <td width="100" height="20" align="right">用户名</td>
            <td width="400" height="20" align="left">
              <input type="text" name="username"  id="username" size="20" maxlength="12" value="请在此处输入您的用户名"/> *
            </td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">密码</td>
            <td width="400" height="20" align="left">
                <input type="password" name="pass" id="pass" size="12" maxlength="12" /> *
            </td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">确认密码</td>
            <td width="400" height="20" align="left">
              <input type="password " name="pass" id="pass" size="12" maxlength="12" /> *
            </td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">性别</td>
            <td width="400" height="20" align="left">  
                <input type="radio" name="gender" value="男" checked/> 男  <!--checked指的是该选项被选中-->
                <input type="radio" name="gender" value="女" /> 女
            </td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">出生日期</td>
            <td width="400" height="20" align="left">
              <input type="text" name="date" id="date" size="30" />
            </td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">联系电话</td>
            <td width="400" height="20" align="left">
              <input type="text" name="phone" id="phone" size="13" maxlength="13" />
            </label></td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">电子邮件</td>
            <td width="400" height="20" align="left">
              <input type="text" name="email" id="email" size="30" maxlength="30" /> *
            </td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">最高学历</td>
            <td width="400" height="20" align="left">
                <input type="radio" name="grade" value="中专" /> 中专
                <input type="radio" name="grade" value="大专" checked/> 大专
                <input type="radio" name="grade" value="本科"/> 本科
                <input type="radio" name="grade" value="研究生" /> 研究生
            </td>
          </tr>
          <tr>
            <td width="100" height="20" align="right">爱好</td>
            <td width="400" height="20" align="left">
                <input type="checkbox" name="like" value="上网" /> 上网
                <input type="checkbox" name="like" value="篮球" checked/> 篮球
                <input type="checkbox" name="like" value="听歌" /> 听歌
                <input type="checkbox" name="like" value="下棋" checked/> 下棋
            </td>
          </tr>
          <tr>
            <td height="20" colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" name="Submit" value="提交" />&nbsp;&nbsp;&nbsp;
                <input type="reset" name="Submit2" value="重写" />
            </td>
          </tr>
        </table>
      </form>

</body>
</html>

如果我们要做如上图的HTML表单，我们要使用到表单标签<form>。

首先，表单在网页HTML中主要负责数据采集功能。（表单是一个容器，可以存放各种表单元素。）

常见的表单元素有:

input：用来定义用户可输入数据的输入字段。常用的属性，有type属性：指定要加入的表单练习（比如：文本字段、密码字段、复选框、单选按钮等等），有name属性：为该表项的控制名

keygen：用于表单的密钥对生成器字段

object：用来定义一个嵌入对象

output：用来定义不同类型的输出，比如脚本的输出

select：用来定义下拉列表/菜单

textarea：用来定义一个多行的文本输入区域

<form></form>标签：为表单标签，用于创建供用户输入的HTML表单，里面需要加入其他表单元素进行修饰。
功能：用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。

文字框和密码框的输入：使用<input>元素的type属性，可以表单中加入表项，并控制表项的风格。如果type属性值为text，则输入的文本以标准的字符显示；如果type属性值为password，则输入的每个字符显示为符号“ * ”。再表项前应加入表项的名称，如“您的姓名”等，以告诉访问者在随后的表项中应该输入的内容。

文本框和密码框的格式为：

<input type="text" name="文本框名">

<input type="password" name="密码框名"

例如：普通文本输入框：

<!-- 当type="text"时，该input框为普通文本输入框 -->

        账户：<input type="text">

运行如下：

密码输入框：

<!-- 当type="text"时，该input框为密码输入框 -->
        密码：<input type="password">

运行如下：

复选框和单选钮：在页面中有些地方需要列出几个项目,让访问者通过选择钮进行选择。选择钮可以是复选框(checkbox)或单选钮(radio)。

用<input>元素的type属性可设置选择钮的类型:value属性可设置该选择钮的控制初值,用以告诉表单设计者选择的结果；用checked属性表示是否为默认选中项；name属性是控制名，同一组的选择钮的控制名是一样的。复选框和单选钮的格式为：

爱好：
        <!-- 当type="checkbox"时，该input框变成普通的多选框-->
        <input type="checkbox" name="item1" id="item1">睡大觉
        <input type="checkbox" name="item2" id="item2">打游戏
        <input type="checkbox" name="item3" id="item3">读书

运行如下：

性别：
        <!-- 当type="radio"时，该input框变成普通的多选框-->
        <!-- 注意： 想要input标签变成单选框，需要设置相同的name属性 -->
        <input type="radio" name="item" id="item1">男
        <input type="radio" name="item" id="item2">女

运行如下：

提交按钮(submit)可以将填写在文本域中的内容发送到服务器。

重置按钮(reset)可以将表单输人框的内容恢复为初始值。

 <!-- 当type="submit"时，该input框变成普通的提交按钮-->
        <input type="submit" value="登录">
 <!-- 当type="reset"时，该input框变成普通的重置按钮-->
        <input type="reset" value="清除">

运行如下：