表单基础，密码框单选按钮多选复选框下拉菜单文本域按钮提交按钮重置按钮

最新推荐文章于 2023-03-08 20:12:51 发布

好好学习昂

最新推荐文章于 2023-03-08 20:12:51 发布

阅读量907

点赞数

分类专栏：软件测试学习笔记 # 阶段1测试基础文章标签： html

本文链接：https://blog.csdn.net/m0_46442882/article/details/119518867

版权

软件测试学习笔记同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

阶段1测试基础

17 篇文章 0 订阅

订阅专栏

表单基础

密码框单选按钮多选复选框下拉菜单文本域按钮提交按钮重置按钮

<body>
    <!-- 
        form表单标签里面就是所有用户填写的表单数据
        action="xxx" 把表单数据提交给哪一个后台程序去处理
        method="post" 传递数据时候的方式方法，post是隐式提交数据，get是明文传递数据
        type类型，text普通的输入框
        placeholder="请输入用户名" 文字提醒，提升用户体验
        autofocus="autofocus" 光标默认在用户输入框里面
     -->
    <form action="xxx.py" method="POST">
        用户名:<input type="text" placeholder="请输入用户名" autofocus="autofocus"/>  
        <br>

    <!-- 密码框 type="password" -->
        密码:<input type="password"> <br>

    <!-- 单选框，
        checked="checked"默认选中
    -->
    性别：
    <!-- 只有点击圆圈的时候，才能选中，想要点击文字“男”的时候也能选中圆框，使用户的体验感更好
         需要在男的标签里面加上id,使label的for与id的内容一致，就可以实现这个功能
    -->
    <input type="radio"name="xb" checked="checked" id="nan">
    <label for="nan">男</label>
    <input type="radio" name="xb" id="nv">
    <label for="nv">女</label>
    <br>

    <!-- 多选框 -->
    <!-- 一切测试要追溯到用户的需求  -->
    爱好：
    <input type="checkbox" id="cs">
    <label for="cs">测试</label>
    <input type="checkbox" id="java">
    <label for="java">java</label>
    <input type="checkbox" id="python">
    <label for="python">python</label>
    <input type="checkbox" id="c++">
    <label for="c++">c++</label>
    <br>

    <!-- 
        下拉选框 selected="selected"默认选中
        测试细节：1、刷新的时候是否有默认选中的状态2、点击文字是否可以进行切换
     -->
     
    城市：
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
    </select>
    <br>

    <!-- 
        文本域
        测试细节:
        1、测试三大主流浏览器外观大小是否一致
        2、提醒程序员禁用拖拽大小的功能

     -->
    意见：<textarea name="yijian" id="yj" cols="30" rows="10" placeholder="感谢您的宝贵意见"></textarea>
    <!-- 不允许随意更改文本框的大小 -->
    <style type="text/css">textarea{resize: none;}</style>
     <br>
    <!-- 普通按钮 -->
    普通按钮：<input type="button" value="普通按钮">
     <br>
    <!-- 重置按钮 -->
    重置按钮：<input type="reset" value="重置">
    <br>
    <!-- 提交按钮 -->
    提交按钮：<input type="submit" value="提交">
    <!-- 提交个重置按钮，value需要写上内容，
        为了避免浏览器的兼容性不同，运行带来的差异性 -->

    </form>
</body>