HTML表单web前端笔记

最新推荐文章于 2024-07-09 17:50:54 发布

Renyuke99

最新推荐文章于 2024-07-09 17:50:54 发布

阅读量105

点赞数

分类专栏：笔记文章标签：前端 html

本文链接：https://blog.csdn.net/Renyuke99/article/details/127525137

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML表单

此篇为我的前端笔记
- HTML 表单

此篇为我的前端笔记

此篇文章来记录一下我所学到的HTML知识笔记

HTML 表单

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

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用 <form> 标签来创建表单:

<form>
这里面写入表单信息元素
</form>

下面是我写的一个前端作业

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>任昱柯的自我介绍</title>
</head>

<body>
    <h1>任昱柯的自我介绍</h1>
    <main>
        <section>
            <h2>我的照片</h2>
            <p>获取我的更多信息<a href="https://weibo.com/renyuke">MORE</a></p>
            <p>
                <a href="https://www.baidu.com/" target="_blank">点我</a>
                <br>
                <a href="http://baidu.com" target="_self">百度一下</a>
            </p>
            <a href="https://baidu.com" target="_blank"><img src="img/kun.webp" width="300" height="300"
                    alt=""><img /></a>
            <!--todo-->
        </section>

        <section>
            <h2>个人信息列表</h2>
            <h3>我最喜欢做的三件事</h3>
            <ul type="circle">
                <li>吃饭</li>
                <li>睡觉</li>
                <li>熬夜</li>
            </ul>
            <figure>
                <img src="img/8.webp" width="100" height="100" alt="">
                <figcaption>皮卡丘篮球鸡</figcaption>
            </figure>
            <h3>我最不喜欢的三件事</h3>
            <ol type="I">
                <li>上早八</li>
                <li>学数学</li>
                <li>早八学数学</li>
            </ol>
            <figure>
                <img src="img/7.webp" width="100" height="100" alt="">
                <figcaption>篮球鸡</figcaption>
            </figure>
        </section>

        <section>
            <h2>联系我</h2>
            <form>
                <p><label for="name">姓名：</label><input id="name" placeholder="你的姓名"></p>
                <p><label for="phone">手机号：</label><input id="phone" placeholder="手机号"></p>
                <p><label>上传文件：</label><input type="file"></p>
                <p><label>时间：</label><input type="datetime"></p>
                <p><label>按钮：</label><input type="button"></p>
                <p><label>选择框：</label><input type="checkbox"></p>
                <p><label>性别：</label>
                    <select name="sex">
                        <option value="boy">男生</option>
                        <option value="girl">女生</option>
                        <option value="unknow" selected>未知</option> 
                    </select>
                </p> 
                <p><label for="userid">账号：</label><input id="userid" type="text"></p>
                <p><label for="password">密码:</label><input id="password" type="password"></p>
                <p><label>radio</label><input type="radio"></p>
                <p><label>重置：</label><input type="reset"></p>
                <p><label>提交：</label><input type="submit"></p>
                <select></selesdct>
            </form>
        </section>
    </main>
</body>

</html>

最后的一段就是实现的表单功能

HTML 表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮

一、HTML常见的行内元素有：

<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>

还有包括一些文本元素如： 、、 、 、、 、 、<del> 、 等

二、HTML常见的块级元素有：

<div>、<table>、<form>、<p>、<ul>、

<h1>......<h6>、<hr>  、<pre>、<address>、<center>、<marquee> 、<blockquote>  等。

三、区别

块级元素

总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
宽度没有设置时，默认为100%；
块级元素中可以包含块级元素和行内元素。

行内元素

和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
高度、宽度是不可控的，设置无效，由内容决定。
根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

四、转换

当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。

使用display属性能够将三者任意转换：
display:inline;转换为行内元素；
display:block;转换为块状元素；
display:inline-block;转换为行内块状元素。
行内块状元素综合了行内元素和块状元素的特性：
不自动换行，与其他行内元素都会在一条水平线上排列；
高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
默认排列方式为从左到右。

Renyuke99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单web前端笔记

此篇文章来记录一下我所学到的HTML知识笔记表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。我们可以使用标签来创建表单:下面是我写的一个前端作业最后的一段就是实现的表单功能一、HTML常见的行内元素有：还有包括一些文本元素如：等三、区别块级元素总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；高度、宽度、margin及pad
复制链接

扫一扫