表单元素及配合表单元素的其他元素

表单元素

一系列元素,主要用于收集用户数据

input元素

如果需要默认被选中的话,则需要使用 checked

输入框

  • type属性:输入框类型

type:text;普通文本输入框

type:password;密码框

type:data;日期选择框,有兼容性问题


  <input type="text" value="姓名" >
  <input type="text" placeholder="请输入账号">

  
  <input type="password" placeholder="请输入密码">

  
  <input type="date">

在这里插入图片描述

type:search;搜索框,有兼容性问题

tape:range; 滑块

type:number; 数字输入框,有兼容性问题


  <input type="search">
  
  
  <input type="range" min="1" max="5">

  
  <input type="color">

  
  <input type="number" min="10"  max="100" step="20">

在这里插入图片描述

type:radio; 单选框 因为页面中可能会有许多单选框,因此需要通过name属性来告诉浏览器哪些单选框属于一组,从而来达到单选的目的


  <p>
    性别
    <input type="radio" name="gender" checked><input type="radio" name="gender">p>

在这里插入图片描述

type:checkbox;多选框


  <p>
    爱好:
    <input type="checkbox" checked>篮球
    <input type="checkbox">音乐
    <input type="checkbox">画画
    <input type="checkbox">游泳
  p>

在这里插入图片描述

type:file; 表示选择文件

  • value属性:输入框的值
  • placeholder属性:显示提示的文本,文本框没有内容时显示

input 元素可以制作按钮

当type值为reset、buttom、submit时,input表示按钮


  <p>
    <input type="button">
  p>
  <p>
    <input type="reset">
  p>
  <p>
    <input type="submit">
  p>

表单元素及配合表单元素的其他元素_第1张图片

select元素

  • 下拉列表选择框

  • 通常和option元素配合使用

  • 如果多选的话,要加上 multiple

 <p>
    请选择你喜欢的主题
    <select name="" id="" multiple>
      <optgroup label="明星">
        <option>易烊千玺option>
        <option>李易峰option>
        <option>杨幂option>
      optgroup>
      <optgroup label="运动">
        <option>篮球option>
        <option>网球option>
        <option>羽毛球option>
      optgroup>
    select>
  p>

表单元素及配合表单元素的其他元素_第2张图片

textarea元素

  • 文本域,多行文本框

  • 文本的行高可以通过设置 cols和rows来设置,也可以通过css来设置

<body>
  <p>
    请输入简介:
    <textarea name="" id="" cols="30" rows="10" placeholder="请输入简介">textarea>
  p>
body>

表单元素及配合表单元素的其他元素_第3张图片

表单状态

readonly属性:布尔属性,只读状态,不会改变表单显示样式

disabled:布尔属性,禁用状态,会改变表单显示样式,任何表单都可以用

配合表单元素的其他元素

label

普通元素,通常配合单选框和多选框使用

  • 显式关联

可以通过for属性,让label元素关联某一个表单元素,for属性书写表单元素id的值

  • 隐式关联
<p>
   
   请选择性别:
   <input type="radio" name="gender" id="radmale">
      <label for="radmale">label>
   <input type="radio" name="gender" id="radfemale">
      <label for="radfemale">label>
 p>

 <p>
   
   <label>
     <input type="radio" name="gender">label>

   <label>
     <input type="radio" name="gender">label>
 p>

datalist

数据元素

该元素本身不会显示到页面,通常用于和普通文本框配合

form元素(以后用的多)

通常情况下,会将整个表单元素,放置到form元素的内部,作用是当点提交表单时,会将form元素内部的表单内容以合适的方式提交到服务器

form元素对开发静态页面没有什么意义

fieldset 元素

表单分组

<body>
  <div>
    <h1>修改用户信息h1>
    <fieldset>
      <legend>账号信息legend>
      <p>
        用户账户
        <input type="text" value="12344" readonly>
      p>
      <p>
        用户密码
        <input type="password" disabled>
      p>
    fieldset>
    <fieldset>
      <legend>个人信息legend>
      <p>
        姓名
        <input type="text">
      p>
      <p>
        城市
        <select name="" id="">
          <option value="">上海option>
          <option value="">西安option>
          <option value="">河南option>
          <option value="">广州option>
          <option value="">哈尔滨option>
        select>
      p>
    fieldset>
  div>

表单元素及配合表单元素的其他元素_第4张图片

你可能感兴趣的:(html,css)