html表单

表单

作用：收录用户信息

每一个表单是form

属性：

action="" 接口地址

name="" 表单的名称

method="get/post" 数据提交方式

表单元素：

1、文本框（输入框）<input type="text">

2、密码框 <input type="password">

3、提交按钮 <input type="submit">

4、重置按钮 <input type="reset">

5、空按钮 <input type="button">

6、单选按钮 <input type="radio"> 注：每一组单选按钮，name属性保持一致

7、多选按钮 <input type="checkbox">

8、上传文件框 <input type="file">

9、下拉菜单 <select>

</select>

10、多行文本域 <textarea></textarea>

cols="30" rows="10" 字符为单位的宽高

禁止用户推拽框的大小 resize:none; CSS属性

input里面的属性：

type属性：决定了input在表单里面的显示状态

value属性：根据input显示状态不同，作用也是不一样的、input的值

maxlength属性：内容的最大的长度

name属性：当前表单元素的名称

size属性：字符为单位控制input的大小

单选、多选按钮的属性：

默认选中：checked="checked"

禁止选中：disabled="disabled"

<body>
    <form action="">
        <!-- <input type="text" value="请输入您的姓名" maxlength="5" > -->
        <input type="text" name="userNmae">
        <hr>
        <input type="password">
        <hr>
        <input type="submit">
        <input type="reset">
        <input type="button" value="空按钮">
        <hr> 性别：
        <input type="radio" name="sex" disabled>男
        <input type="radio" name="sex" checked>女
        <hr> 爱好：
        <input type="checkbox">运动
        <input type="checkbox" checked>吃
        <input type="checkbox">喝
        <input type="checkbox">玩
        <input type="checkbox" disabled>写代码
        <hr>
        <input type="file">
        <hr>
        <select name="" id="">
           <option value="1990">1990</option>
           <option value="1991">1991</option>
           <option value="1992">1992</option>
           <option value="1993">1993</option>
           <option value="1994">1994</option>
           <option value="1995" selected>1995</option>
       </select>
        <hr>
        <textarea name="" id="" cols="30" rows="10"></textarea>


    </form>
    <!-- <button>按钮</button> -->

</body>

表单内部的标签：

fieldset

对表单元素进行分组，fieldset之间可以互相嵌套

默认样式：有边框

legend

表单字段集标题

一般放在fieldset第一个子元素位置

label 标签

做提示信息的：把提示信息放在label里面

有个for属性：属性值为一个元素的ID名

<body>
    <form action="">
        <fieldset>
            <legend>个人信息</legend>
            <p>
                <label for="userName">姓名：</label>
                <input type="text" id="userName">
            </p>
            <p>
                <label for="">地址：</label>
                <input type="text">
            </p>
            <p>
                <label>性别：</label>
                <input type="radio" name="sex" id="man"><label for="man">男</label>
                <input type="radio" name="sex" id="woman"><label for="woman">女</label>
            </p>
        </fieldset>
        <fieldset>
            <legend>其他信息</legend>
            <fieldset>
                <legend>喜欢这个表单</legend>
            </fieldset>
            <fieldset>
                <legend>运动</legend>
            </fieldset>
            <fieldset>
                <legend>建议</legend>
            </fieldset>
        </fieldset>
    </form>
    <label for=""></label>
</body>

posted on 2020-12-24 21:00 sunandwang 阅读(134) 评论(0) 收藏举报