网页与HTML学习笔记006 | 表单标签及制作注册页面

最新推荐文章于 2024-06-11 11:33:55 发布

@煩煩33

最新推荐文章于 2024-06-11 11:33:55 发布

阅读量819

点赞数 2

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/M99922000/article/details/133907980

版权

学习来源：B站黑马pink老师

表单标签

网页中的表单，最常见的有注册和收集信息页面。在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三部分构成。

一、表单域

表单域是一个包含表单元素的区域。HTML中，<form>标签用于定义表单域，该标签会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">

各种表单元素控件

</form>

<form >标签常用属性

属性	属性值	作用
action	url地址	用于指定接受处理表单数据的服务器程序的ur地址
method	get/post	用于设置表单数据提交方式
name	名称	用于指定表单名称

目前只需要掌握：写表单元素之前，应当有表单域将它们先包含起来。

二、表单控件（表单元素）

1、input输入表单元素

#为单标签

#type为必备属性，不同属性值对应不同的控件类型

<input type="属性值" />

type属性
属性值	描述
button	定义可点击按钮
checkbox	定义复选框（多个input必须名字相同才可以实现多选）
file	定义输入字段和“浏览按钮”，供文件上传
hidden	定义隐藏的输入字段
image	定义图像式的提交按钮
password	定义密码字段，掩码字符
radio	单选按钮（多个input必须名字相同才可以实现单选）
reset	重置按钮，重置表单数据
submit	定义提交按钮
text	定义单行的文本输入字段

input的其他属性
属性	属性值	描述
name	自定义	input元素的名称
value	自定义	input元素的值
checked	checked	规定此input元素首次加载时应当被选中（即打开时默认选中）
maxlength	正整数	输入字段中字符最大长度

<label>标签：input元素定义标注。用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或选择对应的表单元素上。

#语法

<label for="sex"> 男</label>

<input type="radio" name="sex" id="sex" />

#for属性值=相关元素的id属性值

2、select下拉表单元素

使用场景：页面中若有多个选项让用户选择，并想节约页面空间时，可以用<select>标签定义下拉列表。

<select>

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>
............
</select>

在option中定义selected=“selected”时，当前项为默认选项

3、textarea表单域元素

使用场景：当用户输入内容较多时，就不能使用文本框表单了，此时即需要<textarea>标签。<textarea>标签是用于定义多行文本输入的控件，常见于留言板、评论等等。

<textarea>的两个参数：

cols="每行字符数"

rows="显示的行数"

<textarea rows="3" cols="20">

(默认值加于此处)

文本内容

</textarea>

ps：实际开发中不会使用，多用CSS改变大小。

三、综合实例应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姻缘网</title>
</head>
<body>
    <h3>姻缘网</h3>
    <table width="700" border="1">
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="num1"> <label for="num1">男</label>
                <input type="radio" name="sex" id="num2"> <label for="num2">女</label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option selected>--请输入年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                </select>
                <select>
                    <option selected>--请输入月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option selected>--请输入日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="请输入所在地区">
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" id="num3"> <label for="num3">未婚</label>
                <input type="radio" name="marry" id="num4"> <label for="num4">已婚</label>
                <input type="radio" name="marry" id="num5"> <label for="num5">离婚</label>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" value="请输入目前学历"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="like" id="num6"> <label for="num6">可爱的</label>
                <input type="checkbox" name="like" id="num7"> <label for="num7">温柔的</label>
                <input type="checkbox" name="like" id="num8"> <label for="num8">能干的</label>
                <input type="checkbox" name="like" id="num9"> <label for="num9">帅气的</label>
                <input type="checkbox" name="like" id="num10"> <label for="num10">强壮的</label>
                <input type="checkbox" name="like" id="num11"> <label for="num11">有气质的</label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textare>
                    自我介绍一下吧~
                </textare>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><label for="num12"><input type="checkbox" checked="checked" id="num12"> 我已同意注册条款和会员加入协议</label></td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#"><h5>我是会员，立即登录</h5></a></td>
        </tr>
    </table>
</body>
</html>

浏览器运行结果：