HTML进阶之表单元素

表单元素

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

input元素

主要做输入框
type属性:表示输入类型

<input type="text"> 普通类型文本框
<input type="password" placeholder="请输入密码"> 密码框
<input type="date"> 日期选择框，有兼容性问题
<input type="search"> 搜索框，有兼容性问题
<input type="range"> 滑块，有兼容性问题
<input type="color"> 颜色选择框
<input type="number"> 数字输入框，有兼容性问题
<input type="checkbox"> 多选框
<input name="1" type="radio"> 单选框，要分组
<input type="file"> 上传文件框

其他属性

1. checked: bool属性,用于单选或多选框, 默认选中

   <input type="checkbox" checked> 多选框
   

2. value: 表示输入框的值

   <input type="text" value="请输入账号"> 输入文本框上有值
   

3. placeholder:表示显示提示文本, 文本框没有内容时显示

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

4. required: 表示必填框

   <input type="email" required>
   

input制作按钮

当type取值为 reset , button, submit时, input表示按钮,
分别为重置按钮, 普通按钮, 提交按钮

    <form action="">
   <input type="text" name="" id="" required>
   <input type="reset" name="" id="" value="这是一个重置按钮">
    <input type="button" name="" id="" value="这是一个普通按钮">
    <input type="submit" name="" id="" value="这是一个提交按钮">
</form>

select元素

下拉列表选择框

通常和option元素配合使用, 且子元素为option. option为下拉列表框

    <select name="" id="">
        <option value="">成都</option>
        <option value="">北京</option>
        <option value="" selected>邵阳</option>
    </select>

给下拉列表进行分组, 分组是不能选择的,在select中加上bool属性multiple可以多选, label为分组标题

    <select name="" id="" multiple>
        <optgroup label="城市" >
        <option value="">成都</option>
        <option value="">北京</option>
        <option value="">邵阳</option>
    </optgroup>
        <optgroup label="水果">
            <option value="">苹果</option>
            <option value="">西瓜</option>
            <option value="">橘子</option>
        </optgroup>
        </select>

textarea元素

文本域, 多行文本框
无空白折叠,且位置写在内容区,建议使用css改变宽高

<!-- cols表示多少列，rows表示多少行 -->
<textarea  cols="30" rows="10"></textarea>

按钮元素

button, type属性: reset,submit, button ,默认为submit

    <button type="button">这是一个按钮</button>

图片按钮

    <button>
        <img src="./pingpong.png" alt="">
        <span>这是一个图片按钮</span>
    </button>

表单状态

文本框状态:

1. readonly属性: bool属性,是否只读,不会改变表单显示样式

   <input type="text" value="不能修改" readonly>
   

2. disabled属性: bool属性, 是否禁用, 会改变表单显示样式(通用样式)

   <input type="text" value="禁用" readonly disabled> 
   <input type="text" value="没有禁用" readonly > 
   

   

配合表单元素的其他元素

label

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

• 显示关联
  可以通过for属性, 让label元素关联某一个表单元素,for属性书写表单元素id值,可以通过点击内容选择

请选择性别
<input id="radMale" name="1" type="radio">
<label for="radMale">男</label>

<input id="radFemale" name="1" type="radio">
<label for="radFemale">女</label>

• 隐式关联

<label >
<input name="1" type="radio">
男
</label>      

form元素

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

action表示将表单提交到哪里，method为提交的方式，

<form action="https://www.baidu.com/" method="GET">
    <p>
        账号：
        <input name="loginid" type="text">
    </p>
    <p>
        密码：
        <input name="loginpassword" type="password">
    </p>
    <p>
        <button >提交</button>
    </p>
</form>

fieldset元素

表单分组

<fieldset>
    <legend>账号信息</legend>
    <p>
    用户账号：
    <input type="text">
</p>
<p>
    用户密码：
    <input type="password">
</p>
</fieldset>