form表单标签(非常重要，必须掌握)

Posted 2020-11-23 xiaodan1040

表单标签：form(非常重要，必须掌握)

form标签用于获取用户跟浏览器交互(包含输入，选择，上传文件等操作)的数据，并将数据打包发给服务端

属性

• action：控制数据的提交路径

action=""：默认向当前页面所在的地址提交数据
action="全路径"：向当前的绝对路径的地址提交数据
action="/index/"：后缀文件，将该后缀跟当前页面的地址进行拼接，并将数据提交到这个页面中

• method：控制数据的提交方式(也就是请求首行中的请求方式)，默认get

method="get"：提交方式为get方式
method="post"：提交方式为post方式

• enctype：控制数据提交的编码格式，默认为application/x-www-form-urlencoded

enctype="application/x-www-form-urlencoded"：只能提交数据
enctype="multipart/form-data"：可发送提交文件请求

form中的标签

input：文本框(百变金刚)，可通过type属性设置成不同类型的文本框

• type="text" 普通文本框

<p>
    <!--
        labal标签，通过for="input标签的id值"
        让用户在点击文本时，直接聚焦到对应的input标签中
    -->
    <label for="name">用户名：
        <!--input标签 type="text"：普通文本框
            value="username"：文本框内默认值是username
            placeholder="用户名文本框"：没有填写内容时，文本框的作用的提示信息
        -->
        <input type="text" id="name" value="username" placeholder="用户名文本框">
    </label>
</p>

• type="password" 密文文本框 在该文本框输入任何文本，都会用密文的形式显示

<p>
    <label for="pwd">密码：
        <!--input标签 type="password"：密文文本框，即输入的内容使用密码的形式显示-->
        <input type="password" id="pwd" placeholder="密码文本框">
    </label>
</p>

• type="date" 日历文本框

<p>
    <label for="birth">生日：
        <!--input标签 type="date"：日历文本框-->
        <input type="date" id="birth">
    </label>
</p>

• type="radio" 单选按钮

<p>
    <label>性别：
        <!--input标签 type="radio"：单选按钮；
            name：属性，表示标签名称，如果多个按钮的是一组单选按钮，那么它们的name属性是一致的
            checked：属性，表示当前按钮被选中，这里是一个简写方式，正规写法是checked="checked"
            ps：当属性值和属性名一致时，可以直接简写成属性名
        -->
        <input type="radio" name="gender" checked>男
        <input type="radio" name="gender">女
    </label>
</p>

• type="checkbox" 复选按钮

<p>
    <label>爱好：
        <!--input标签 type="checkbox"：复选按钮
            name：属性，表示标签名称，如果多个按钮的是一组复选按钮，那么它们的name属性是一致的
            checked：属性，表示当前按钮被选中
        -->
        <input type="checkbox" name="hobby">阅读
        <input type="checkbox" name="hobby">K歌
        <input type="checkbox" name="hobby">跑步
        <input type="checkbox" name="hobby">画画
    </label>
</p>

• type="file" 上传文件按钮

<p>
    <label for="open">
        <!--input标签 type="file"上传文件按钮，
            显示的文本根据不同的浏览器显示不同的结果可以跟系统交互，打开本地的文件
        -->
        <input type="file" id="open">
    </label>
</p>

• type="button" 普通按钮，没有任何功能，后期可自定义功能

<!--input标签 type="button"：普通按钮，没有任何功能，后期可自定义功能-->
<label for="button">
    <input type="button" id="button" value="普通按钮">
</label>

• type="submit" 提交按钮，将当前按钮所在form标签中的数据提交到服务端，请求方式为POST

<!--input标签 type="submit"：提交按钮，将当前按钮所在form标签中的数据提交到服务端，请求方式为POST-->
<label for="submit">
    <input type="submit" id="submit" value="提交">
</label>

• type="reset"：重置按钮，将将当前按钮所在form标签中的数据清空

<!--input标签 type="reset"：重置按钮，将将当前按钮所在form标签中的数据清空-->
<label for="reset">
    <input type="reset" id="reset" value="重置">
</label>

button：按钮

<label for="cancel">
    <!--button标签 普通按钮
        跟input标签type="button"功能类似
        区别：button会刷新页面，input中的button按钮不会
    -->
    <button id="cancel">取消</button>
</label>

select：下拉框，跟option搭配使用

<p>
    <label>省份：
        <!--select标签：下拉框
            multiple：属性，表示可以下拉框的选项允许多选
            下拉框中的选项通过option标签表示
        -->
        <select id="provences" multiple>
            <!--option标签：用来定义下拉列表中的可用选项-->
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">广州</option>
            <option value="">深圳</option>
            <option value="">武汉</option>
            <option value="">西安</option>
        </select>
    </label>
</p>

textarea：多行文本框

<p>
    <label for="textarea">个人简介：
        <!--textarea标签：多行文本框，可以输入多行记录
            cols：文本内可显示的文本宽度，不建议使用这种方式
            rows：文本内可显示文本的行数，超出后，会出现滚动条
        -->
        <textarea name="" id="textarea" cols="60" rows="10">

        </textarea>
    </label>
</p>