HTML 学习笔记（三）

作者：lxmoe

2022-11-06
辽宁
本文字数：1227 字
阅读完需：约 4 分钟

来到了 HTML 学习之路上最头疼的表单环节，记笔记时更需要缕清思路，集中记忆涉及到的标签内容。

表单标签

在 HTML 中表单通常用于收集信息，一个完整的表单通常由表单元素，例如文本输入框，复选框，提交按钮等，提示文本和表单域构成，表单域是为了容纳表单元素和提示文本，定义处理表单数据程序的 url 地址并提交到服务器。

其中表单元素可以通过 input 标签来控制，我们还可以为他设置属性，常用属性如下表所示：

看完基本的表单元素表后，来进行一波实战吧：

<input type="text" /> **可输入任何文本
<input type="password" maxlength="10" /> **输入后以密码形式展示，允许输入最大字符数为10
<input type="radio" name="xx" /> 帅哥<input type="radio" name="xx" /> 美女<input type="radio" name="xx" checked="checked"/> 又帅又美**是一组 需要设置name值相同，checked用来设置默认选中项
<input type="checkbox" name="yy" /> 蛋糕<input type="checkbox" name="yy" /> 薯片**复选框可以同时选择多个
<input type="button" value="zz" /> **当type为button，我们需要给他一个文本值，当type为submit和reset时，我们也可以设置value修改本身文本值
<input type="image" src="qq.jpg" /> **该图像会变成一个按钮
<input type="file" /> *可上传文件

复制代码

综上的实战让我们了解了整体的表单元素的使用，那么下面再来补充一些表单修饰的东西吧

那么，不妨思考一下，当我们在填写信息的时候，如果输入框过小，不容易点击怎么办呢，这时我们就可以采用获取焦点的方式，通过label标签来实现，具体怎么实现呢，可以看看下面的代码，

<label> 输入账号：<input type="text" /> </label><label for="figure"> 输入账号：<input type="text" /> <input type="text" id="figure" /> </label>

复制代码

在使用label的时候我们需要注意的是：当只有一个表单时用label直接包裹住，而当有多个表单时，我们就需要用for id进行绑定

还有某个表单项目的文字要求输入字符太多的时候，比如输入个人介绍，我们就需要使用文本域，即textarea标签，我们可以修改cols与rows来控制表单域的大小

<textarea cols="每行中的字符数" rows="显示的行数">内容</textarea>

复制代码

一般来说下拉菜单比较常用于固定项的选择防止用户自定输入，而我们需要设置下拉菜单的选择的时候，可以用 select 定义下拉菜单，下面是一个基本的下拉菜单，而我们可以通过 selected 设置选项一为默认项

<select>    <option selected="selected">选项1</option>    <option>选项2</option>    <option>选项3</option>    <option>选项4</option></select>

复制代码

最后，我们应给表单定义一个表单域，即创建一个表单，来实现用户信息能够传递给服务器，我们需要对于表单进行一些属性的配置。

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

复制代码

在上面的表单中action用于指定接收并处理表单数据的 url 地址，method可设置表单数据的提交方式，值为get/post，而name可指定表单名称

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/c42c81e9c81b86c987d96d3d7】。文章转载请联系作者。

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

发布

暂无评论

创作场景

HTML 学习笔记（三）

表单标签

lxmoe

评论