前端新手表单部分小结

2022.03.22 今日所学小结。

表单包括form,select,option,input,textarea等等。

首先是form表单元素。其中form元素包含一个或者多个表单元素（如上）（不包括form本身）

 

用户可以在form表单内进行单行以及多行文本域的编写，并通过input标签的type="submit"或者type="image"进行数据的提交。form标签还可以设置发送方式method、规定向何处发送数据action、以及向服务器发送数据时如何进行编码enctype。

<form method="post" enctype="multipart/form-data" action="demo.html">
</form>

input为当行文本域，其中标签上的type属性规定了<input>标签的类型，其中type包括：text（默认），password ,checkbox，image，button，submit，file等等。分别可以对应着文本、密码、复选框、图片、按钮、提交、文件上传的作用。其中图片可以起到和submit同样的作用，可以对数据进行提交。input标签的name属性表示提交标签的key，需要输入的input标签所输入的值，表示对应标签提交时的value。input标签还有些属性包括默认选项checked。

用户名:<input type="text" name="pwd" size="15" maxlength="5">

 

 

select标签内部嵌套着option标签进行使用，option标签为选项，其中option标签的value值和外层select标签的name值正是提交数据时的一组键值对value和key。

            <select name="package">
                <optgroup label="包包">
                    <option value="Chanel" selected>Chanel</option>
                    <option value="LV">lv</option>
                    <option value="Gucci">Gucci</option>
                </optgroup>
            </select>

option标签可以定义下拉列表的选项，属性selected为默认选项的设置.其中的optgroup为定一组标题。

 

textarea为多行文本域，此标签可以设置文本域可见宽度、可见高度、以及最大显示字符数。

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

以上所学到学的元素中只有form为块级元素，其余select、option、input、textarea都为行内元素。