form标签的使用

<!DOCTYPE html>
<html>
<head>
    <title>form的使用方法</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <p>
            <label for="username">用户名</label>   #‘label’使其属性‘for’建立标记,在‘’input‘’内设立一个‘id’等于for的值,此时用户点击‘用户名’即可选中输入框
            <input type="text" placeholder="请输入用户名" id="username">     #‘placeholder’使其在输入框内提示用户要输入额内容,用户一旦输入内容,此提示将会消失。
        </p>
        <p>
            <label for='pwd'>密码</label>
            <input type="text" placeholder="请输入用户密码" id="pwd">   #‘type’使其产生横向表格
        </p>

            #单项选择
        <p>
            男:<input type="radio" name="sex" checked="checked">   # "checked"使默认选项为‘男’ 加在哪里就默认哪一项

           #‘type=radio’使选项标记为圆点
            女:    <input type="radio" name="sex">   #‘name’ 使多个选择中只能选择一个选项
        </p>

         #多项选择
        <h4>课程选择</h4>
        <p>
            web前段:<input type="checkbox"checked='checked'>   # type="checkbox"使选项标记为方格
            python全栈:<input type="checkbox">
            Java全栈:<input type="checkbox">
            php语言:<input type="checkbox">
        </p>
        <h2>下拉框实现单选</h2>
        <p>
            <select name='class'>       #‘’select‘’   使其产生下拉框  
                <option value="a">HTML</option>
                <option value="b">javaScript</option>
                <option selected="selected">vue</option>   #selected="selected"使此项为默认选项
                <option>css</option>
            </select>
            <h2>下拉框实现多选</h2>
        <p>
            <select multiple='multiple'>  #实现让用户进行下拉多选
                <option value="a">HTML</option>    #option建立选项
                <option value="b">javaScript</option>
                <option selected="selected">vue</option>   #使用户打开选项层,默认看到的选项
                <option>Jquety</option>
                <option>php</option>
                <option>lua</option>
                <option>vb</ption>
                <option>go</option>
            </select>
        </p>
        <h4>个人简述</h4>
        <p>
            <textarea rows="10" cols="40"></textarea>
        </p>
        <p>
            <input type="submit" value="立即注册">    #"submit"提交按钮,‘value’对按钮进行描述
            <input type="reset" value="重置">
        </p>
        
    </form>    
    <button>按钮</button>   #用的比较少


</body>
</html>

posted on 2020-02-13 17:16  别离  阅读(343)  评论(0编辑  收藏  举报

导航