表单标签(最丑注册页面--form)

原创
2019/04/13 00:55
阅读数 37

 

表单:
    * 概念:用于采集用户输入的数据的。用于和服务器进行交互。
    * form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
        * 属性:
            * action:指定提交数据的URL
            * method:指定提交方式
                * 2种比较常用
                   * get
                        # 请求参数会在地址栏中显示,参数大小是有限制的, 不太安全。
                   * post:
                        # 请求参数不会再地址栏中显示, 请求参数的大小没有限制, 较为安全。

        * 表单项中的数据要想被提交:必须指定其name属性

  • label:指定输入项的文字描述信息,label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。   表单标签:这里用到的有:input、select、textarea
  • input:可以通过type属性值,改变元素展示的样式  

                table的属性有(这里用到的有):text、password、radio、checkbox、file、submit、button、image(这三个属于按钮)

  • text:文本输入框,默认值
               * placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
  • password:密码输入框
  • radio:单选框
  • checkbox:多选框
  • file:文件选择框
  • submit:提交按钮,可以提交表单
  • button:普通按钮
  • image:图片提交按钮
             * src属性指定图片的路径

1、表单中每个数据都要起个对象名字,提交表单才有效果;

2、在爱好和性别这块,被checked修饰的数据,默认选择;

3、省份中被selected修饰默认选择被修饰的数据;

4、在按钮这块,submit和image功能一样,只是内部样式不一样,前者是字,后者是图片。

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易注册页面</title>
</head>
<body>
<form action="#" method="post">
    <label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br/>
    <label for="password">密码</label>:<input type="password" name="passwprd" placeholder="请输入密码" id="password"><br/>
    性别:<input type="radio" name="gender" value="male" checked>男
    <input type="radio" name="gender" value="female">女<br/>
    爱好:<input type="checkbox" name="hobby" value="shopping">逛街
    <input type="checkbox" name="hobby" value="Java">Java
    <input type="checkbox" name="hobby" value="game">打游戏<br/>
    图片:<input type="file" name="file"><br/>
    照片:<img src="img/regbtn.jpg"><br/>
    生日:<input type="date" name="birthday"><br/>
    邮箱:<input type="email" name="email"><br/>
    年龄:<input type="number" name="age"><br/>
    省份:<select name="province">
    <option value="">--请选择--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected>陕西</option>
</select><br/>
    自我描述:<textarea cols="20" rows="5" name="des"></textarea></textarea><br/>
    <input type="submit" value="提交">
    <input type="button" value="一个按钮"><br/>
    <input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部