【HTML】常用表单重点知识：重点总结

常用表单重点知识

表单属性

1.action：服务器上处理表单的脚本；
2.method:提交方式
GET:少量且公开
POST:大量且加密

1. enctype:值对编码方案（普通表单和分块文件上传）
   4.target
   5.id:使用ID引用表单
   6.onsubmit:事件属性，提交时执行的JS

表单类型

text/password/date/number/url/radio/select/textarea等

表单写法

重点属性介绍
1.name:value 名值对组合
2.required:必选项
3.readonly:只读，只能看，不能改，但能提交
4.disabled:禁用，只能看，不能改，不能提交
5.autocomplete：浏览器退回后保留原来的数据
6.number类型：min/max/step：限定表格中数据最大值和最小值及步长
7.date类型：min/max格式：1949-10-01/2000-01-01,表示只能选择这个时间区间
8.url类型：自带url类型验证
9.color类型：拾色器
10.upload类型：上传文件用，name不能用-线，可以用_线，input选择，button上传。
11.hidden隐藏域类型：不在页面显示，用来做赋值使用，一般都包含name和value。
12.range滑动条：可以有来做评星打分等用途。
13.progress进度条：双标签<progress></progress>,可以给max和value,不可以给min
14.radio单选框:

- name:必须相同，以保证唯一性
- input和它自己的label标签绑定，建议：男(male),女(female),保密(secret)
- input.value <==> input.id <==> label.for 一致
- checked: 默认选项，避免空提交
- 总标签label.for和默认标签绑定

15.checkbox复选框
16.select+option下拉列表：name在select中，value在option中。

- 实现提示的效果selected + disabled
- name 和 value 分别在select和option中
- 选择过多，可以使用分组，optgroup
- multiple:支持多选
- <select required><option value=''> ：可验证select必选。

17.textarea多行文本框：

- textarea:没有value属性，它的值位于textarea标签之间
- maxlength:最大长度
- 可以使用CSS限制textarea固定大小

20.label标签for和input标签id内容一致，进行绑定
21.output功能与span功能类似，但更好用，用来做计算输出
22.每个表单控件都有一个form属性，都指向当前表单可以用来访问表单不同的控件中的值，很重要！

代码范例

<form action="register.php" method="post" enctype="application/x-www-form-urlencoded">
    <fieldset>
        <!--表单分组-->
            <legend>分组名称：基本信息</legend>
            <div class="username">
            <label for="username">用户名：</label>
            <!--label的for和input的id内容一致，进行绑定-->
            <input type="text" id="username" name="username" placeholder="请输入用户名" required autocomplete/>
            </div>
            <div class="password">
            <label for="password">密码：</label>
            <!--label的for和input的id内容一致，进行绑定-->
            <input type="password" id="password" name="password" placeholder="请输入密码" required autocomplete/>
            <button onclick="this.previousElementSibling.type='text'">显示密码</button>
            </div>
            <div class="email">
            <label for="email">邮箱：</label>
            <!--email自带格式验证-->
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required />
            </div>
            <div class="age">
                <label for="age">年龄：</label>
                <input type="number" id="age" name="age" min="18" max="80" placeholder="请输入年龄" required />
            </div>
            <div class="birthday">
                <label for="birthday">出生日期：</label>
                <input type="date" id="birthday" name="birthday" min="1949-10-01" max="2000-01-01" placeholder="请输入年龄" required />
            </div>
            <div class="blog">
                <label for="blog">网址：</label>
                <!--URL自带格式验证-->
                <input type="url" id="blog" name="blog"  placeholder="请输入网址" required />
            </div>
            <div class="color">
                <label for="color">拾色器</label>
                <input type="color" name="color" id="color" value="#FFFF00" onchange="getColor(this)" />
                <output>#FFFF00</output>
            </div>
            <div class="serach">
                <label for="query">搜索：</label>
                <input type="search" name="search" id="search" placeholder="输入关键字">
                <button type="button">查询</button>
            </div>
        </fieldset>
        <fieldset>
            <legend>其他信息</legend>
            <!-- upload上传控件 -->
            <div class="upload">
                <label for="upload">头像:</label>
                <input type="file" name="name_pic" id="upload" />
                <button type="button">上传</button>
            </div>
            <!-- hidden 隐藏域 -->
            <input type="hidden" name="uid" value="10010" />
            <!-- type=range 滑动块 -->
            <div class="range">
                <label for="range">星级：</label>
                <input type="range" name="range" id="range" min="0" max="5" step="1" oninput="getStatus(this)" />
                <output>0</output>
            </div>
            <!-- progress 进度条 -->
            <div class="progress">
                <label>进度</label>
                <!-- min不要给 -->
                <progress name="progress" max="100" value="10"></progress>
                <output></output>
                <button type="button" onclick="handle(this)">+1</button>
            </div>
        </fieldset>
        <fieldset>
            <legend>预置内容：</legend>
            <!-- 预置内容：用户选择就好，不用输入。服务器90%的安装问题都是因为输入控件导致的。-->
            <!-- 常用预置表单有radio,select等 -->
            <div class="gender">
                <!-- 主标签使用默认的选项，点击主标签显示默认 -->
                <label for="secret">性别: </label>
                <!-- 
                    1. name:必须相同，以保证唯一性
                    2. input和它自己的label标签绑定，建议：男(male),女(female),保密(secret)
                    3. input.id <==> label.for必须一致,建议input.value也一致。
                    4. checked: 默认选项，避免空提交
                    5. 总标签label.for和默认标签绑定
                -->
                <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
                <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
                <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
            </div>
            <!-- checkbox 多选框 -->
            <div class="hobby">
                <!-- 不用绑定某个标签，可以去掉for -->
                <label>爱好：</label>
                <!--
                    1. name:hobby[]，数组保存一个值或多个值
                    2. input.id <==> label.for一致
                -->
                <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
                <input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label>
                <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label>
                <input type="checkbox" name="hobby[]" value="program" id="program"><label for="program">编程</label>
            </div>
            <!-- select + option下拉列表 -->
            <div class="edu">
                <label for="edu">学历：</label>
                <select name="edu" id="edu" multiple>
                    <!-- 
                        1.实现提示的效果selected + disabled 
                        2.name 和 value 分别在select和option中
                        3.选择过多，可以使用分组，optgroup
                        4.multiple:支持多选
                    -->
                    <option value="" selected disabled>--请选择--</option>
                    <optgroup label="义务教育">
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                    </optgroup>
                    <optgroup label="高等教育">
                        <option value="4">专科</option>
                        <option value="5">本科</option>
                        <option value="6">硕士</option>
                        <option value="7">博士</option>
                    </optgroup>
                </select>
            </div>
            <!-- datalist 数据列表 -->
            <div class="like">
                <label for="keyword">语言：</label>
                <!--
                    1.自带联想提示：预定义+自定义，即可实现自己输入，也能从预置中选择：input+select
                    2.input + dateList + option
                    3.input.list <==> datalist.id进行绑定
                -->
                <input type="search" name="language" list="details" id="keywork">
                <!-- input.list <==> datalist.id进行绑定 -->
                <datalist id="details">
                    <!-- 预置列表 -->
                    <option value="html">html</option>
                    <option value="php">php</option>
                    <option value="css">css</option>
                    <option value="js">js</option>
                    <option value="vue">vue</option>
                    <option value="node">node</option>
                </datalist>
            </div>
        </fieldset>
        <div>
            <label for="comment">个人简介</label>
            <!-- 
                1. textarea:没有value属性，它的值位于textarea标签之间
                2. maxlength:最大长度
                3. 可以使用CSS限制textarea固定大小
            -->
            <textarea name="comment" id="comment" cols="30" rows="10">Hello world</textarea>
        </div>
        <button>提交</button>
        <!-- from中的button，默认为提交，等同于以下代码 type="submit" -->
        <button type="submit"></button>
        <!-- type="button" 只是一个普通按钮，没有预置行为，如提交，复位 -->
        <!--
            如果想将表单的同步提交，改为异步提交(Ajax,Fetch),禁用默认行为
            1. <button type="button">
            2. 事件方法中: event.preventDefault(),禁用默认行为
            3. form.onsubmit = "return false",禁用当前表单默认提交行为
        -->
    </form>