前端表单元素其他属性

黄丫丫07

于 2022-11-06 14:14:35 发布

阅读量115

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_51495354/article/details/127715392

版权

属性值	描述
Button	定义可点击按钮（多数情况下，用于通过js启动脚本）
Reset	定义重置按钮，重置按钮会清除表单中的所有数据
Submit	定义提交按钮，提交按钮会把表单数据发送到服务器
File	定义输入字段和“浏览”按钮，供文件上传

<label>标签：为input元素定义标注

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

<label for="sex" >男</label>

<input type="radio" name="sex" id="sex"/>

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

<!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>Document</title>

</head>

<body>

    <label for="text">用户名：</label><input type="text" id="text">

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

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

</body>

</html>

Select下拉表单元素：在页面中，如果有多个选项让用户选择，并且想要节约空间时，就可以使用<select>下拉表单。

<select>

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

        <option>选项4</option>

        <option>选项5</option>

    </select>

注意：<select>中至少包含一对<option>

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

Textarea文本域表单元素：当用户输入内容较多时，可以使用<textarea>标签。

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。常见于留言板、评论。

<textarea rows="3" cols="1">

    文本内容

</textarea>



<!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>Document</title>

</head>

<body>

    <form>

        今日反馈：

        <textarea name="" id="" cols="30" rows="10"></textarea>

    </form>

</body>

</html>