8、常用HTML及from表单

<!DOCTYPE html>
<html>
        <head>
            <meta charset="utf-8">
            <title>我的第一个页面</title>
        </head>
        <h1>这是一个测试</h1>
        <!--表单
            action数据提交到哪个URL上,就由相应的URL函数去处理逻辑
            method提交的方式是什么,GET/POST
            method为空的情况下,点提交数据会提交到当前的url方式上
        -->
        <form action="" method="">
            <!--
                name指的提交数据的名字
                value 指定提交的数据内容是什么  
            -->
            <!--用户名文本框-->
            用户名: <input type="text" name="username" value="yht" />   <!-- 空格代码--> 

            <!--密码框-->
            密码: <input type="password"  name="password" value="" />
            </br> <!--br换行-->

            <!--圆形单选框,在name属性值相同的情况下,页面只准选一个,checked页面默认显示选择男-->
            <input type="radio" name="sex" value="1" checked="checked" />男
            <input type="radio" name="sex" value="0" />女
            </br> <!--br换行-->

            <!--方形多选框,这里value可以写同一个,一样可以多选-->
            爱好: <input type="checkbox" value="zuqiu" name="zuqiu" checked="checked"  />足球
                  <input type="checkbox" value="pinpang" name="pinpang" />乒乓球
                  <input type="checkbox" value="duobi" name="duobi" />躲壁球
            </br> <!--br换行-->

            <!--下拉框-->
            年龄范围:<select name="age">
                <option value="1-10">1-10</option>
                <option value="11-20">11-20</option>
                <option value="21-30" selected="selected" >21-30</option> <!--selected属性表示页面默认选择此项-->
            <select/>
            </br> <!--br换行-->

            <!--文本输入框,key是desc,values是你页面上输入的值,所以这个不用写value-->
            <textarea name="desc">文件输入框</textarea>
            </br> <!--br换行-->

            <!--日期插件-->
            开服日期: <input type="date" name="kaifu" value="2019-05-01" /> 
            </br> <!--br换行-->

           <!--超链接-->
            <a href="http://www. baidu.com">打开百度</a>
            </br> <!--br换行-->

            <!--提交按钮,点击会提交-->
            <input type="submit" value="提交登陆" />

            <!--普通按钮,点击不提交-->
            <input type="button" value="普通登陆" />

        </form>

    <body>
        <!--注释-->
    </body>
</html>

猜你喜欢

转载自blog.51cto.com/yht1990/2386666