HTML5(二)

原创
2016/09/14 17:39
阅读数 6
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>

        <!-- 表单分为三个部分
        1. form标签 (包含了数据提交的方式method和服务器地址action)
        2. 表单域 (输入框等等 采集用户信息的标签)
        3. 表单按钮 (提交 复位 等等)
        -->

        <form method="post" action="http://10.0.8.8/sns/my/register.php">

            <!-- 表单域-->
            <!--
            type -- 用该属性来区分input的类型  text(纯文本输入框标签)  password(表示的是密文输入框) email(邮箱输入框)
            name -- 值要与接口文档中接口字段一致
            placeholder -- 空白提示语
            -->
            <input type="text" name="username" placeholder="请输入注册的账号"/><br/>
            <input type="password" name="password" placeholder="请输入注册的密码"/><br/>
            <input type="email" name="email" placeholder="请输入注册的邮箱"/><br/>


            <!-- 表单按钮-->
            <!--
            type :  submit(提交按钮)  点击提交按钮之后 会将用户信息主动提交给服务器
                    reset(重置)   会清空输入框的所有内容
                    button(普通按钮) 如果不绑定事件的话没有任何实际作用


            value:  修改input标签显示内容的
          e -->
            <input type="submit" value="注册"/>
            <input type="reset"/>
            <input type="button" value="普通按钮"/>

        </form>
        <form method="post" action="http://10.0.8.8/sns/my/login.php">
            <input type="text" name="username" placeholder="请输入用户名"/><br/>
            <input type="password" name="password" placeholder="请输入密码"/><br/>
            <input type="submit" value="登录"/>
            <input type="reset"/>
        </form>


        <!--其他表单域-->
        <form>


            <!-- 1.单选按钮 type="radio" -->

            <!-- checked 默认选中某一项-->
            <p>您的性别是?</p>
            <input type="radio" name="sex" checked/><span>男</span>
            <input type="radio" name="sex"/><span>女</span>
            <input type="radio" name="sex"/><span>未知</span>

            <!-- 2. 多选框 type="checkbox"-->
             <p>你喜爱的女神有?</p>
            <input type="checkbox" name="god"/><span>高圆圆</span>
            <input type="checkbox" name="god"/><span>范冰冰</span>
            <input type="checkbox" name="god"/><span>林心如</span>

            <!-- 3. 下拉菜单-->
            <select>
                <option>河北省</option>
                <option>山东省</option>
                <option>河南省</option>
                <option>江苏省</option>
                <option>浙江省</option>
                <option>安徽省</option>
                <option>黑龙江省</option>
            </select>

            <!-- 4. 选择文件 type="file"-->
            <input type="file"/>

            <!-- 5.选择日期-->
            <!--
            type="date" 年月日
            type="datetime" 年月日 时分
            type="time" 时分
            type="week" 周数
            -->
            <input type="date"/>
            <input type="datetime"/>
            <input type="time"/>
            <input type="week"/>


            <!-- 6. 选择颜色 type="color"-->
            <input type="color"/>

            <!-- 7.进度条  type="range"-->
            <input type="range" min="0" max="100" value="30"/>

            <!-- 8. 设置数字type="number"-->
            <input type="number"/>

            <!-- 9. 设置URL-->
            <input type="URL"/>

            <!-- 10. 可以表示图片-->
            <input type="image" src="../img/icon.png"/>

            <input type="submit"/>

        </form>


    </body>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部