HTML表单元素

最新推荐文章于 2022-04-28 18:17:48 发布

路飞小朋友

最新推荐文章于 2022-04-28 18:17:48 发布

阅读量133

点赞数

分类专栏： ★ HTML

本文链接：https://blog.csdn.net/wozhangyi/article/details/106563672

版权

★ HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表单常用标签 link

主要标签

form 定义一个 HTML 表单，用于用户输入，可包含以下所有标签
input 定义一个输入控件，很多属性，重点介绍
textarea 定义多行的文本输入控件
button 定义按钮。
select 定义选择列表（下拉列表）

配合标签

optgroup 定义选择列表中相关选项的组合（配合select使用）
option 定义选择列表中的选项（配合select使用）
label 定义 input 元素的标注（配合input使用）

不常用标签

fieldset 定义围绕表单中元素的边框。
legend 定义 fieldset 元素的标题。
datalist New 规定了 input 元素可能的选项列表。
keygen New 规定用于表单的密钥对生成器字段。
output New 定义一个计算的结果

form 标签 link

常用属性

name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用
action 指定表单数据的处理程序，一般是PHP，如：action=“login.php”
method 表单数据的提交方式，一般取值：get(默认)和post

input 标签 link

常用属性

name 属性定义input元素的名称
value 属性为 input 元素设定值，对于不同的输入类型，value 属性的用法也不同
disabled 文本框只读，不能编辑，光标点不进去。属性值可以不写
type 属性规定input元素的类型（重点下面细讲）

type 属性值 link

text -------- 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
password ---- 定义密码字段。该字段中的字符被掩码
radio ------- 定义单选按钮
checkbox ---- 定义复选框
file -------- 定义输入字段和 "浏览"按钮，供文件上传
hidden ------ 定义隐藏的输入字段
button ------ 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
submit ------ 定义提交按钮。提交按钮会把表单数据发送到服务器
image ------- 定义图像形式的提交按钮
reset ------- 定义重置按钮。重置按钮会清除表单中的所有数据

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="get">
    <!--文本框与密码框-->
    <p>账号: <input type="text" name="user_name" maxlength="9"></p>
    <p>密码: <input type="password" name="user_pass"></p>
    <!--单选和复选框 表单提交上去的是value的值 而不是后面的汉字-->
    <p>
        <span>性别: </span>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
    </p>
    <p>
        <span>兴趣: </span>
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="画画">画画
    </p>
    <!--文件上传-->
    <p><input type="file" name="pic" accept="#"></p>
    <!--隐藏字段-->
    <p><input type="hidden" name="country" value="China"></p>
    <!--各种按钮-->
    <p>登录: <input type="submit" value="登录"></p>
    <p>重置: <input type="reset" value="重置"></p>
    <p>图片按钮: <input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="60px"></p>
</form>

</body>
</html>

textarea 标签 link

定义和用法

textarea 标签定义多行的文本输入控件
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性

常用属性 link

cols 规定文本区域内可见的宽度
rows 规定文本区域内可见的行数
name 规定文本区域的名称，用于在 JavaScript 中对元素进行引用，或者在表单提交之后，对表单数据进行引用
readonly 只读

select 标签 link

定义和用法

select 标签用来创建下拉列表
option 标签定义下拉列表中的一个选项，作为 select 的一个元素使用
optgroup 标签经常用于把相关的option选项组合在一起

常用属性 link

name 属性规定下拉列表的名称，用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据
size 属性规定下拉列表中可见选项的数目
disabled 属性规定下拉列表应该被禁用，是一个布尔属性，被禁用的下拉列表既不可用，也不可点击

button 标签 link

定义和用法

button 标签定义一个按钮，button元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处
如果在 html表单中使用 button 元素，不同的浏览器可能会提交不同的按钮值。建议使用 input 在 html表单中创建按钮

我们先来看下面一段代码：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

label 标签

定义和用法

label 标签为 input 元素定义标注，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
label标签的for 属性值，和 input 标签的 id 属性值相同，那么这个label和input就有绑定关系了

代码示例

<form action="#" method="get">
    <label for="content">账号：</label>
    <input type="text" id="content"><br>
    性别：
    <input type="radio" name="sex" id="nan" value="boy"><label for="nan">男</label>
    <input type="radio" name="sex" id="nv" value="girl"><label for="nv">女</label><br>
</form>

综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="get">
    <!--文本框与密码框-->
    <p>账号: <input type="text" name="user_name" maxlength="9"></p>
    <p>密码: <input type="password" name="user_pass"></p>
    
    <!--文本域-->
    <p>介绍: <textarea name="introduce" cols="30" rows="3"></textarea></p>
    
    <!--下拉列表-->
    <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <optgroup label="河南">
            <option value="zhengzhou">郑州</option>
            <option value="luoyang">洛阳</option>
        </optgroup>
    </select>
    
    <!--button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本） 一般用input标签创建button按钮-->
    <button type="button" onclick="alert('你好')">点我</button>
    <input type="button" value="点我" onclick="alert('hello')">
</form>

</body>
</html>

路飞小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单元素

表单常用标签 linkform --------- 定义供用户输入的 HTML 表单input -------- 定义输入控件textarea ----- 定义多行的文本输入控件button ------- 定义按钮select ------- 定义选择列表（下拉列表）optgroup ----- 定义选择列表中相关选项的组合option ------- 定义选择列表中的选项label -------- 定义 input 元素的标注fieldset ----- 定义围绕表单中元素的边框l
复制链接

扫一扫

专栏目录