HTML- 标签学习之- 表单

input  系列, 类型根据type 区分,所有效果如下:

 注意点:

 单/多选框:  

        name :  相同name属性的单选值为一组,遗嘱中只能有一个被选中                

       checked: 默认选中

        性别<input type="radio" name="sex" checked>男  <input type="radio" name="sex">女

        爱好<input type="checkbox" name="like" checked>学习  <input type="checkbox" name="like">爬山  <input type="checkbox" name="like">旅游

 multiple:选择多个文件

        头像<input type="file" multiple>

type= 按钮系列

 Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <h1> 表单标签</h1>
        <hr>
        文本框: <input type="text" placeholder="账号">
        <br>
        <br>
        密码框: <input type="password" placeholder="密码">
    
        <br>
        <br>
        性别<input type="radio" name="sex" checked>男  <input type="radio" name="sex">女
    
        <br>
        <br>
        爱好<input type="checkbox" name="like" checked>学习  <input type="checkbox" name="like">爬山  <input type="checkbox" name="like">旅游
    
        <br>
        <br>
        头像<input type="file" multiple>
    
        <br>
        <br>
        <input type="submit" >  <input type="reset"  >  <input type="button"  value=" 免费注册" >

        <button type="reset"> 标签按钮 重置 </button>

    </form>

</body>
</html>

下拉菜单系列:select

 

selected :默认选中

    <select >
        <option > 北京</option>
        <option > 广州</option>
        <option selected> 上海</option>
        <option > 深圳</option>

    </select>

文本域标签: textarea

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数(开发中一般 用css 设置)
  • 右下角可以拖拽改変大小
  • 实际开发时针对于样式效
    <textarea name="文本域" id="" cols="40" rows="20"></textarea>

Lable标签

常用于绑定内容与表单标签的关系

两种方式分别如下:(方式1 :lable 的for 与表单id 绑定  方式2:lable 直接包裹)


<input type="radio" name="sex" id="m"> <label for="m">男</label>
               
<label><input type="radio" name="sex">女</label>

语义化标签:

div: 独占一行

span:  同一行展示

<div> 这是 div</div>

<span> 这是span</span>

以下为手机端标签:

 

字符实体:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值