【HTML5】html5开篇基础(5)

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣,记得关注我👀👀以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力,一起进步!

加油,一起CHIN UP!💪💪

🔗个人主页:E绵绵的博客**
📚所属专栏:**

1. JAVA知识点专栏

深入探索JAVA的核心概念与技术细节

2.JAVA题目练习****

实战演练,巩固JAVA编程技能

3.c语言知识点专栏****

揭示c语言的底层逻辑与高级特性

4.c语言题目练习****

挑战自我,提升c语言编程能力

5.Mysql数据库专栏

了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

学习前端知识,更好的运用它

📘 持续更新中,敬请期待 ❤️❤️

2.表单

在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

3.表单域

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

在 HTML标签中 ,<form>标签用于定义表单域,以实现用户信息的收集和传递<form>会把它范围内的表单元素信息提交给服务器,

<form action="url地址"method="提交方式"name="表单域名称">
各种表单元素控件
</form>
  • action 属性指定表单提交数据的服务器 URL。
  • method 属性指定 HTTP 请求方法,常用的值为 GETPOST

我们现在暂时不用表单域提交数据给服务器,只需要学会写 form等标签即可.等之后学习服务器编程阶段才会学习到该知识点。

4.表单控件

在英文单词中,input是输入的意思,而在表单元素中<input>标签用于收集用户信息在 <input>标签中,<input>标签是一个单标签。包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮等)。


<input type="属性值" />

文本输入控件

单行文本输入框(<input type="text">)

用于接收用户输入的单行文本,如用户名、地址等。

密码输入框(<input type="password">)

用于输入密码,输入的内容不可见。

选择控件

单选按钮(<input type="radio">)

用户只能选择一个选项,通常用于性别、是/否等单选情况。

​
复选按钮(<input type="checkbox">)

用户可以选择多个选项,通常用于兴趣爱好、服务条款同意等。

​

按钮控件

提交按钮(<input type="submit">

用于提交表单的数据到指定的服务器端。

重置按钮(<input type="reset">)

用于重置表单中所有的输入,使其恢复到初始状态。

普通按钮(<input type="button">)

不会提交表单,通常用于与 JavaScript 交互触发事件

文件选择框(<input type="file">)
用于上传文件,如图片、文档等

input标签常用属性

name属性

name是每个表单元素都有的属性值,主要给后台人员使用,方便后台人员识别并处理数据。

除此以外我们还要注意在选择控件中其name属性必须要相同,这样单选按钮才能实现单选功能(否则就能多选),复选按钮也同理。

value属性

value属性在文本输入控件中设置和按钮控件中设置都可以将其value值显示出来。 而选择控件是不显示的。

<body>
    <form action="php.jdg" method="get" name="第一个表格">
        <input type="text" value="请输入">
        <br />
        按钮: <input type="checkbox" value="请输入">
        <br />
        <input type="reset" value="重置按钮">
    </form>
</body>

所以value在选择控件中是不设置的。

checked属性

规定此 Input 元素首次加载时应当被选中,应用于选择控件中。

<body>
    <form>
        按钮: <input type="checkbox" checked="checked">
</form>
</body>

maxlength属性

适用于文本输入控件,它能决定文本输入控件中输入字段的最大长度。

<label>标签

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

下面是一个使用<label>的示例:

<input type="text" id="username">
<label for="username">请输入用户名:</label>

在这个例子中,点击"请输入用户名:"文本会使<input>元素获得焦点。

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

<select>标签

<select> 标签用于创建下拉列表,用户可以从中选择一个选项。它通常用于表单中,每个选项通过 <option> 标签定义。

1.<select>中至少包含1对<option>
2.在<option>中定义selected="selected"时,当前项即为默认选中项,

<body>
    <form>
        <form>
            <label for="cars">选择一款汽车:</label>
            <select id="cars">
                <option>沃尔沃</option>
                <option selected="selected">萨博</option>
                <option>梅赛德斯</option>
                <option>奥迪</option>
            </select>
        </form>

    </form>
</body>

<textarea>标签

在表单元素中,<textarea>标签是用于定义多行文本输入的控件使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
通过<textarea>标签可以轻松地创建多行文本输入框

<textarea rows="3" cols="20">
文本内容 <!-- 该文本内容会默认显示在输入框中 -->
</textarea>

cols="每行中的字符数",rows="显示的行数",我们在实际开发中不会使用,都是用 CSS 来改变大小,

5.提示信息

这个最简单,根本不需要标签,在form标签内填入适当的文字就可以当作提示信息用了。

6.额外知识点

以上的标签都可以独立存放,不需要特定放在form中。form的作用只是能把这些元素信息给提交到服务器,没有form就提交不了。

相关推荐
涔溪37 分钟前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
fakaifa2 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
夜色呦2 小时前
掌握ECMAScript模块化:构建高效JavaScript应用
前端·javascript·ecmascript