自学web前端开发4(HTML)

一、表单标签

登录注册(输入账号、密码等)、填个人信息、搜索等功能需要用表单标签来实现

1.1 input系列

input 是一个单标签,在网页中用于收集用户信息的表单效果

1.1.1 type属性

input 标签可以通过type属性值的不同展示不同的效果

    <p>1 text 文本框,用于输入单行文本</p>
    文本框:<input type="text">
    <br>
    <p>2 password 密码框,用于输入密码</p>
    密码框:<input type="password">
    <br>
    <p>3 radio 单选框,用于多选一</p>
    单选框:<input type="radio">
    <br>
    <p>4 checkbox 多选框,用于多选多</p>
    多选框:<input type="checkbox">
    <br>
    <p>5 file 文件选择,用于之后上传文件</p>
    文件选择:<input type="file">
    <br>
    <p>6 submit 提交按钮,用于提交</p>
    <input type="submit">
    <br>
    <p>7 reset 重置按钮,用于重置</p>
    <input type="reset">
    <br>
    <p>8 不同按钮,默认无功能,需要配合js添加功能</p>
    <input type="button">

效果如下

1.1.2 placeholder属性与占位符

input标签的placeholder属性能在文本框中提示用户输入的内容

    账号:<input type="text" placeholder="请输入账号">
    <br>
    密码:<input type="password" placeholder="请输入密码">

效果如下

1.1.3 单选框radio(name属性和checked属性)

单选的具体属性有

  1. name 分组,属性值为组名,有相同属性值的单选为一组
  2. checked 默认选中
    性别:<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女 <input type="radio" name="gender" checked>其他

实际上,多选 checkbox的属性也与之类似,如

    性别:<input type="checkbox" name="gender" checked> 男 <input type="checkbox" name="gender" checked> 女 <input type="checkbox" name="gender" checked>其他

1.1.4 文件选择file(mutiple属性)

file的mutiple属性能控制进行多文件选择

    <input type="file" multiple>

1.1.5 按钮与表单域

三种按钮(type的属性值)

  1. submit 提交
  2. reset 重置
  3. button 普通按钮

这些按钮功能在一个表单域(form)内实现

表单域是一个双标签,控制了一个表单整体

    <form action="">
        <!-- action的属性值是表单信息的发送地址 -->
        账号:<input type="text" placeholder="请输入帐号">
        <br>
        密码:<input type="password" placeholder="请输入密码">
        <br>
        <br>
        <input type="submit"> 
        <input type="reset" value="这个是重置"> 
        <input type="button" value="普通按钮">
    </form>

注意其中的value属性的属性值为按钮内的文字

1.2 button按钮标签

在表单中,可以直接把button作为一个标签(双标签),其type属性值有submit/reset/button等,效果与input的按钮系列相同

    <form action="">
        <!-- action的属性值是表单信息的发送地址 -->
        账号:<input type="text" placeholder="请输入帐号">
        <br>
        密码:<input type="password" placeholder="请输入密码">
        <br>
        <br>
        <button>普通按钮</button>
        <button type="button">也是普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="menu">菜单按钮</button>
    </form>

1.3 select下拉菜单标签

下拉菜单是在网页中提供多个选择项的表单控件

标签组成

  • select标签 下拉菜单的整体
  • option标签 下拉菜单的每一项

常见属性

  • selected:默认选中
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <option>深圳</option>
    </select>

默认第一个option具有selected属性

1.4 textarea文本域标签

在网页中提供可输入多行的表单控件

标签为textarea(双标签)

常见属性:

  • cols:文本域的可见宽度
  • rows:文本域的可见高度

注意:实际的设计一般使用CSS

    <form action="">
    <textarea cols="60" rows="30"></textarea>
    <br>
    <button type="reset">重置</button>
    </form>

1.5 label标签

用于绑定内容与表单标签

1.5.1 使用方法一

  1. 使用label标签把内容(文本等)包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置为对应的id属性

1.5.2 使用方法二

  1. 直接把label标签把内容和表单标签一起包裹起来
  2. 把label的for属性删除
    性别:
    <input type="radio" name="gender" id="male"><label for="male">男性</label>
    <label><input type="radio" name="gender" id="female">女性</label>

可以实现在点击“男性”或“女性”的文字时选中相对应的表单

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值