form表单的使用方法及说明

AG。

已于 2022-07-19 09:58:13 修改

阅读量2.2k

点赞数

文章标签： html 前端

于 2022-07-18 20:12:45 首次发布

本文链接：https://blog.csdn.net/zjt200013/article/details/125858309

版权

什么是form表单

form表单是一个较为复杂的系统标签，其内部又可以包含一些很多的输入标签。比如文本框、多行文本框、单选框、复选框、下拉框等等。action表示的含义是当表单提交的时候，将数据发往何处。

页面跳转

把a标签的href属性设置为#xxx时，点击这个a标签里面立刻就会跳转到id值为xxx的元素位置。

    <ul>
        <li><a href="#box1">第一块</a></li>
        <li><a href="#box2">第二块</a></li>
        <li><a href="#box3">第三块</a></li>
        <li><a href="#box4">第四块</a></li>
        <li><a href="#box5">第五块</a></li>

    </ul>
    <div id="box1" class="box">第一块</div>
    <div id="box2" class="box">第二块</div>
    <div id="box3" class="box">第三块</div>
    <div id="box4" class="box">第四块</div>
    <div id="box5" class="box">第五块</div>

input标签

在form表单中，最常见的就是input标签，input是单标签，定义输入框，按钮等。type一般用来定义input的类型，他的值不同，对应input的功能也会发生改变。下面列举常用的有些值：

1. text：定义文本输入框。

2.password：定义密码输入框。

3.image：以图片形式提交。

4. radio：单选框。

5.checkbox：复选框。

6.file：以文件形式提交。

7.button：按钮。

8.submit：提交按钮

9.reset：重置按钮

label的含义

lable：给input添加的标注。for：为了让input和label进行绑定。for的值要与input的值相同，当点击label时，可以让input自动获得输入焦点。

            <label for="account">账号：</label>
            <input type="text" name="account" id="account">

多行文本输入框

多行文本输入框代码如下：

<textarea name="" id="" cols="30" rows="10"></textarea>

cols：number，规定文本区内的可见宽度。rows：number，规定文本区内的可见行度。

按钮

form表单中的按钮一般分为四种：

1.button：自定义可点击的按钮。

2.submit：提交按钮，会把表单里的数据提交给服务器。

3.reset：重置按钮，清除表单内所有的数据。

4.file：文件提交按钮，供文件上传。

其中，file中accept规定文件上传的类型，如image：定义图片形式的提交按钮，必须把src属性和image结合使用。

<input type="file" accept="image/*">

单选框与复选框

radio:定义单选框，checkbox：定义复选框。

复选框代码如下：

               <label for="checkbox">复选框1</label>
               <input type="checkbox" id="checkbox1">
               <label for="checkbox">复选框2</label>
               <input type="checkbox" id="checkbox2">

单选框代码如下：

               你喜欢吃什么水果？
               <input type="radio" name="fruit" id="fruit1" value="苹果">
               <label for="fruit1">苹果</label>
               <input type="radio" name="fruit" id="fruit1" value="香蕉">
               <label for="fruit1">香蕉</label>
               <input type="radio" name="fruit" id="fruit1" value="菠萝">
               <label for="fruit1">菠萝</label>
               <input type="radio" name="fruit" id="fruit1" value="芒果">
               <label for="fruit1">芒果</label>

运行结果如下：

分组标题

fieldset：将表单内容进行分组，会产生一个边框（默认为2px边框，内边距10px，12px），左右外边距为2px）；

legend：legend是fieldset元素定义的标题（默认在分组边框的上边框内，可以左右移动位置）；

               <fieldset>
                <legend>分组标题</legend>
               </fieldset>

分组下拉菜单

select：定义下拉菜单。

optgroup：定义选项组。

option：定义列表中的一个选项内容。

               <select name="" id="">
                <optgroup label="上午">
                    <option value="1">上课1</option>
                    <option value="2">上课2</option>
                    <option value="3">上课3</option>
                </optgroup>
               </select>

效果如下图：