使用html表单元素form创建一个常用的注册框

小七 发表于:2017-05-27 17:59 复制链接

您的等级不够,“初级及以上会员” 开启

?提问题 +写文章
阅读数:6763
      表单元素form在css教程里面我们也有介绍过,当时主要侧重对表单进行样式的修饰,这一节在html的角度再次讲解一遍,我们还是拿一个常规的注册页面来做案例,在常用的大众化网页注册页面,一般有用户名、密码、单选、复选,提交按钮等等几个元素,下面案例演示几个常用的表单元素,分别是:

      1)input标签,这是最重要的一个表单元素,根据不同的type属性有多个形态:
            text,定义常规文本输入,案例中的用户名和密码就是这种;
            radio,定义单选按钮,案例中的性别是单选;
            checkbox,定义复选框,案例中的爱好是复选,可以选择多个爱好;
            submit,定义提交按钮,这个很好理解,末尾的按钮;

      2)textarea标签,定义多行的文本输入控件,这个也比较好理解。

      完整测试代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="reg.php">
  <label>用户名;
  <input type="text" name="textfield" />
  </label>
  <p>
    <label>密码:
    <input type="text" name="textfield2" />
    </label>
  </p>
  <p>
  <label>
    性别:
      <input type="radio" name="性别" value="男" />
      男
      <input type="radio" name="性别" value="女" />
      女
  </label>
  </p>
    <p>
        爱好:
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" />
      语文
      <input type="checkbox" name="checkbox" value="checkbox" />
      数学
          <input type="checkbox" name="checkbox" value="checkbox" />
      物理
          <input type="checkbox" name="checkbox" value="checkbox" />
      化学
     </label>
    </p>
    <p>
      <label>城市:
      <select name="select">
        <option value="北京">1</option>
        <option value="上海">2</option>
        <option value="深圳">3</option>
      </select>
      </label>
    </p>
    <p>
      <label>备注:
      <textarea name="textarea"></textarea>
      </label>
    </p>
    <p>
      <label>
      <input type="submit" name="Submit" value="提交" />
      </label>
    </p>
</form>
</body>
</html>


      可以看出,这是一个典型的注册框,没有添加css修饰。有几个需要说明的地方:

      1)form里面有name和id两个属性,其中name很好理解,是当前表单的名称,叫什么,在同一个html文档中,name可以重复;id是当前表单的唯一标识,在同一个html文档中,id不能重复,id相当于各自的编号,身份证的作用,是唯一的。form里面的name可以理解为一个分组,一个组别里面可以有多个id,也就是很多成员,这样就非常好记忆,也不会出错。

      2)method是发送表单数据的方式,共有两种方法:post和get,get是从服务器上获取数据,post是向服务器传送数据。

      3)action属性是规定提交表单的时候,表单数据会提交到哪里去,案例中是提交到reg.php这个页面。

      4)下拉列表菜单select里面的option选项我们案例里面写的是1,2,3,分别对应的值是北京、上海、深圳,这是为了更加清晰的解释option的用法,当下拉框选择1的时候,下拉框的值“北京”就被选中了,发送到服务器的值就是北京,其实我们也可以直接在<option></option>之间写具体的值,也就是value可以不写,但是这么做不是很规范,毕竟<option></option>之间的文字只是对下拉按钮的说明而已。

      5)单选框和复选框的value属性是必须要写的,对单选框来说,提交表单的时候,服务器接收到的数据是value的值;对复选框来说,提交表单的时候,服务器接收的数据是被选中的选框的值。





返回列表 使用道具 举报
13 条评论
您需要登录后才可以回帖 登录 | 注册
高级
jinbaoyoule jinbaoyoule 发表于 2017-05-28 14:42 | 阅读全部
学习了,谢谢分享
使用道具 举报
回复
我有我道 我有我道 发表于 2017-05-28 17:17 | 阅读全部
我要去试试
使用道具 举报
回复
0513baobei 0513baobei 发表于 2017-05-29 17:50 | 阅读全部
感谢分享
使用道具 举报
回复
yaozhong6625 yaozhong6625 发表于 2017-05-30 23:51 | 阅读全部
不错不错,支持了,感谢分享
使用道具 举报
回复
xukun192 xukun192 发表于 2017-05-31 09:16 | 阅读全部
我要去试试谢谢
使用道具 举报
回复
xingcuide2 xingcuide2 发表于 2017-05-31 14:52 | 阅读全部
使用道具 举报
回复
襄樊力天网络 襄樊力天网络 发表于 2017-06-01 11:05 | 阅读全部
这个需要必须学习啊。
使用道具 举报
回复
h134904 h134904 发表于 2017-06-02 08:30 | 阅读全部
看着这个能尝试下看看
使用道具 举报
回复
写的不错,真心不错,顶一下
使用道具 举报
回复
嘉和 嘉和 发表于 2017-06-09 08:56 | 阅读全部
代码学习很复杂啊,对于不懂的人来说真是一脸懵逼。。。
使用道具 举报
回复
小七 小七 发表于 2017-06-09 12:40 | 阅读全部
嘉和 发表于 2017-6-9 08:56
代码学习很复杂啊,对于不懂的人来说真是一脸懵逼。。。

对SEO从业者来说,html是必须要会一点的,属于基本功
使用道具 举报
回复
12下一页
相关推荐

您的等级不够,“高级会员” 开启