表单

单选框 redio

 <div>
        <input type="radio"name="aaa" id="one">
         <!-- 如果不加name或者name不一样,那么可以多选 -->
        <label for="one">非常满意</label>
        <!-- 给文字加上label可以点击文字进行单选框的选择 -->
    </div>
    <div>
         <input type="radio"name="aaa" id="two" checked>
         <!-- checked可以设置默认值 -->
        <label for="two">满意</label>
    </div>

复选框

 <div>
    <input type="checkbox" name="aaa"><input type="checkbox" name="aaa"><!--不同组的选择name需要不一样-->
   </div>

上传文件和隐藏文字

 <div>
    <!-- 上传文件 -->
    <input type="file" name=""id="">
   </div>
   <!-- 上传图片 -->
   
       <div>
       <form action="">
         <input type="image"src="">
        <!-- 只是用图片代替提交按钮(input type="submit") -->
       </form>
    </div>
    <div>
       <!-- 隐藏标签 -->
       <input type="hidden" name=""id=""value="带给后端的信息">
    </div>
    <!-- 禁用,只读 -->
    <div>
        <input type="radio" disabled>不满意
        <input type="text" readonly>
    </div>

下拉菜单

<div>你的收货地址</div>
    <!-- select属性:1;size,控制显示出几个选项
                2.multipe,控制是否是多选(必须摁住shift/ctrl才可以多选) -->
    <!-- option支持的属性:1.value,可以给后端提供信息
                         2.select,默认选中 -->
    <select multiple>
        <option>辽宁</option>
        <option>山东</option>
        <option>山西</option>
    </select>

 文本域-多行文本输入框

<style>
        textarea{width: 50px;
        height: 50px;
        resize:none;
    }
    /* resize :vertical(垂直方向)/horizontal(水平方向)/both(两边都可以)/none*/
    </style>
</head>
<body>
    <div>
        <!-- 默认value值在双标签里面,注意空格问题 -->
        <textarea placeholder="提示文本"></textarea>
    </div>
</body>

字段集

<fieldset>
        <!-- 设置边框划分区域 -->
        <legent>性别</legent>
        <!-- 给边框一个缺口 -->
    </fieldset>
    <!-- 注意:两个都可以用css添加属性 -->

 表单补充属性----H5-表单新增属性,属性

posted @ 2023-10-14 09:16  故塔拉黑暗之神  阅读(4)  评论(0编辑  收藏  举报