input的高级使用和高级属性_input下拉框属性-优快云博客

本文链接：https://blog.youkuaiyun.com/lm12032015/article/details/123600016

这篇博客探讨了HTML5中input元素的高级使用，包括下拉框select与option，selected属性，range滑块，内置验证功能以及自定义正则表达式。此外，还介绍了input的高级属性，如readonly、required、disabled、hidden、placeholder和pattern属性，以及如何通过label与input联动提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input的高级使用

下拉框是select,列表option
selected默认选中
rang滑块
各种验证,有默认的正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <form action="">

    <!-- 下拉框是select,列表option
      selected默认选中
-->
    <select name="学校" id="">
      <option value="北京大学" selected>北京大学</option>
      <option value="清华大学">清华大学</option>
      <option value="麻省理工大学">麻省理工大学</option>
      <option value="瑞士ETH苏黎世大学">瑞士ETH苏黎世大学</option>
    </select>
  <!-- =========================================================== -->

    <textarea cols="10" rows="10">
      这是一个10行,10列的文本域,默认可以拉伸
    </textarea>
  <!-- =============================================================== -->

    <input type="file" value="这是文件域">

    <!-- 滑块,最大100,最小10,步长每次增减2个 -->
    <input type="range" value="range" max="100" min="10" step="2">

    <input type="search" value="这是一个搜索框" width="100px" height="30px">

  <!-- =============================================================== -->

    <!-- 各种验证,有默认的正则表达式 -->
    <input type="email" value="必须包含@符号,且@后必须有东西">

    <!--  不写也可以用,一旦输入就必须输入正确的网址  -->
    <input type="url" value="https://www.com">

    <input type="number" max="100" min="10" step="3" value="数字验证">

  <!-- =========================================================== -->

    <input type="submit" value="提交">

  </form>

</body>
</html>

运行结果

高级使用

input的高级属性

readonly只读
required必填
disabled禁用
hidden隐藏
placeholder提示语
pattern正则表达式
label for="label"联动id为label的input,增强鼠标可用性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <form action="">
    <input type="text" value="这是只读的" readonly>
    <input type="text" value="这是必填的" required>

    <input type="text" value="这是禁用的" disabled>
    <input type="text" value="这是默认隐藏看不见的" hidden>


    <input type="text" placeholder="这是有默认提示值的">

    <!-- 验证以15开头,只能是0~9中的数字, 总共11位的手机号  -->
    <input type="text" value="这是有手机正则表达式的" pattern="/^15\d{9}$/">
    <br>
  <!--  ======================================================================  -->

    <!--  增强鼠标可用性:点击文本,自动跳转到:id为label的input -->
    <label for="label">点击自动跳转</label>
    <input type="text" id="label" placeholder="联动label自动跳转">

  </form>

</body>
</html>