前端学习打卡Day5

最新推荐文章于 2023-12-06 14:51:13 发布

Caramel Macchiato*

最新推荐文章于 2023-12-06 14:51:13 发布

阅读量131

点赞数

文章标签：前端学习 html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74363523/article/details/128674051

版权

表单标签

为什么需要表单

使用表单的目的是收集用户信息。

表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（又称表单元素）和提示信息3个部分组成。

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式“ name="表单域名称”>
 各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，来区分同一个页面中的多个表单

（后期会进行学习）

写表单元素之前，应该有表单域将其包含

表单域是form标签

表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择内容的控件。

<input>表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息。

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式，例如文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

<input tyepe="属性值“/>

<input/>标签为单标签

type属性设置不同的属性值来指定不同的控件类型

（单选按钮需要有相同的name）

name和value是每个表单元素都有的属性值，主要给后台人员使用。

name表单元素的名字，要求单选按钮和复选框要有相同的name值。

（如果设置了checked按钮，可以默认选中）

checked属性主要针对于单选按钮和复选框

maxlength是用户可以在表单元素输入的最大字符数

<label>标签

<label>标签为input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心：<label>标签的for属性应当与相关元素的id属性相同

<select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

<select>
 <option></option>
 <option></option>
 <option></option>
...
</select>

<select>中至少包含一对<option>

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

<textarea>表单元素

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

<textarea rows="3" cols="20">
文本内容
</textarea>

通过<textarea>标签可以轻松地创建多行文本输入框

cols=”每行中的字符数“，rows=”显示的行数“（实际开发中都用CSS来改变大小）

综合案例

<!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>青春不常在，抓紧谈恋爱</title>
</head>

<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <form>
        <table width="500" border="1">
            <tr>
                <td>性别</td>
                <td><input type="radio" name="1" /><label>男</label><input type="radio" name="1" /><label>女</label></td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option>--请选择年--</option>
                        <option>2</option>
                        <option>2</option>
                        <option>2</option>
                    </select>
                    <select>
                        <option>--请选择月--</option>
                        <option>2</option>
                        <option>2</option>
                        <option>2</option>
                    </select>
                    <select>
                        <option>--请选择日--</option>
                        <option>2</option>
                        <option>2</option>
                        <option>2</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>所在地区</td>
                <td><input/></td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td><textarea>自我介绍</textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="免费注册" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#">我是会员，立即登录</a></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>我承诺</h3>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <ul>
                        <li>年满18岁，单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>

</body>

</html>

查阅文档

Caramel Macchiato*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习打卡Day5

标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用。cols=”每行中的字符数“，rows=”显示的行数“在英文单词中，input是输入的意思，而在表单元素中。用于指定表单的名称，来区分同一个页面中的多个表单。在表单域中可以定义各种表单元素，这些表单元素就是。在标签中，包含一个type属性，允许用户在表单中输入或者选择内容的控件。
复制链接

扫一扫