前端学习第二天(上)--HTML表单

白桃苏打水

已于 2022-03-09 07:48:37 修改

阅读量266

点赞数

文章标签：前端 photoshop vscode

于 2022-03-07 21:56:34 首次发布

本文链接：https://blog.csdn.net/bestier/article/details/123340889

版权

form表单标签 < form > < /form >
重要属性：
1、action 数据提交地址
2、method 数据提交方式
get表示直接提交，post表示加密提交
get会将信息显示在地址栏上，不安全，传输量小，速度快。用在搜索框之类的地方。
post不会将地址显示在地址栏，很安全，传输量大，速度慢，账号密码会使用。

form标签内的其他标签：
1、input是表单内比较重要的元素，根据type属性的不同，显示出不同的形态。
type=”text”
在这里插入图片描述
type=”password”

type=”radio” 只对有相同name值的起作用，如果name值不同，也可以多选。使用时只有点击勾选框才能选择。
在这里插入图片描述

type=”checkbox”,多选框，name值相同的为一组，当属性checked=”checked”时默认被选中。使用时只有点击勾选框才能选择。
（为什么复选框也要有相同的name值呢？
是为了方便在处理页面获取表单传递的值，如果被选中，则在数组name中添加一个元素，不理解没关系，有个印象知道复选也要相同name值就行。）
在这里插入图片描述

Type=”reset” 重置按钮
在这里插入图片描述

Type=”submit” 提交按钮
在这里插入图片描述

Type=”button” 自定义按钮，value值会直接显示在按钮上，作为按钮名称。

在这里插入图片描述

注：
Input标签不仅能在form内使用，也可以在表单外使用
Input的重要属性除了type还有value，
Value是表单默认值，对于文本框就是默认显示在文本内的文字，对于按钮就是按钮上的文字。
在这里插入图片描述

2、label标签。<label > < /label >
扩大选择范围，使点击文字也能够被选中。
重要属性是for=”id”，需要先给input一个id。

在这里插入图片描述

3、下拉菜单select option
在这里插入图片描述
4、文本域 textarea
要设置宽rows 高cols

5、普通按钮button。标签中间的文字是按钮名称。在这里插入图片描述
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h4>青春不常在，抓紧谈恋爱</h4>

    <form action="">
        <table border="1">
            <tr>
                <td>性别：</td>
                <td><input type="radio" id="nan"> <label for="">男</label></td>
                <td><input type="radio" id="nv"> <label for="nv">女</label></td>
            </tr>

            <tr>
                <td>生日：</td>
                <td>
                    <select name="" id="">
            <option value="" selected="selected">请选择年份</option>
            <option value="">2001</option>
            <option value="">2000</option>
            <option value="">1999</option>
            <option value="">1998</option>
            <option value="">1997</option>
            <option value="">1996</option>
            <option value="">1995</option>
            <option value="">1999</option>
                    </select>
                </td>
                <td>
                    <select name="" id="">
            <option value="" selected="selected">请选择月份</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
        </select>
                </td>
                <td>
                    <select name="" id="">
            <option value="" selected="selected">请选择日期</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>所在地区：</td>
                <td> <input type="text" value="南京地区"></td>
            </tr>
            <tr>
                <td>婚姻状态：</td>
                <td>
                    <label for="w">未婚</label><input type="radio" name="hun" id="w">
                    <label for="y">已婚</label><input type="radio" name="hun" id="y">
                    <label for="l">离婚</label><input type="radio" name="hun" id="l">
                </td>
            </tr>
            <tr>
                <td>学历：</td>
                <td>
                    <input type="text" value="博士">
                </td>
            </tr>
            <tr>
                <td>喜欢的类型：</td>
                <td>

                    <label for="11">11</label> <input type="checkbox" name="lei" id="11">
                    <label for="22">22</label> <input type="checkbox" name="lei" id="22">
                    <label for="33">33</label> <input type="checkbox" name="lei" id="33">
                    <label for="44">44</label> <input type="checkbox" name="lei" id="44">
                </td>
            </tr>
            <tr>
                <td>个人介绍：</td>
                <td>
                    <textarea name="" id="" cols="50" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="立即注册">
                </td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#">我是会员，立即注册</a></td>
            </tr>
        </table>
    </form>

</body>

</html>

白桃苏打水

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端学习第二天(上)--HTML表单

form表单标签 < fram > < /fram >重要属性：1、action 数据提交地址2、method 数据提交方式get表示直接提交，post表示加密提交get会将信息显示在地址栏上，不安全，传输量小，速度快。用在搜索框之类的地方。post不会将地址显示在地址栏，很安全，传输量大，速度慢，账号密码会使用。form标签内的其他标签：1、input是表单内比较重要的元素，根据type属性的不同，显示出不同的形态。type=”text”type=”pas
复制链接

扫一扫