如何轻松掌握与理解Form表单的用法和操作指南

目录

什么是form表单        

页面跳转

input标签

label的含义

多行文本输入框

按钮

单选框与复选框

分组标题

分组下拉菜单

---

什么是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>

         效果如下图：

    

                   

---