HTML常用标签笔记 (其二)

cyotto

已于 2024-03-22 17:03:51 修改

阅读量474

点赞数 5

文章标签： html 笔记 microsoft

于 2024-03-22 15:05:52 首次发布

本文链接：https://blog.csdn.net/cyotto/article/details/136914444

版权

本章节记录最基本最常用的input表单交互标签

input标签是html中的交互式控件标签。它的功能非常强大也非常复杂，是HTML最重要的标签之一。input标签是一种行内标签，与其他标签不同，通过type属性可以变更成各样式用于人机交互的控件。


<input>  //在没有写type属性的情况下，它的type属性默认是“text”，文本输入框状态
<input type="text" /> 	//与上面相同,附上效果图

在这里插入图片描述

可以修改type属性变更成其他交互控件，如下：
将type属性设置为password

<input type="password">		//将type属性修改成password，密文输入控件

在这里插入图片描述

将type属性设置为file：

<input type="file">		//将type属性修改成file，文件选择控件

在这里插入图片描述

将type属性设置为radio：

<input type="radio">		//将type属性修改成radio，单选控件
<input type="radio">

//需要注意的是，单选一般是多个选项中选择一个，需要互斥
<input type="radio" name="aa"> 	
<input type="radio" name="aa">

在这里插入图片描述
实际效果，没有相同name属性不会互斥。

将type属性设置为checkbox：

<input type="checkbox">		
//将type属性修改成checkbox，多选控件；多选虽然不需要互斥，但还是需要加上name属性
，用于form向后台传递数据

在这里插入图片描述

其他控件：

<select name="seasons"> 	
//下拉选择控件，单选，若是要实现多选，只需在select标签内加上multiple，同样加上name属性才能正常传递参数
    <option>春</option> 	//下拉选项标签
    <option>夏</option>
    <option>秋</option>
    <option>冬</option>
</select>

在这里插入图片描述

textarea控件：

<textarea></textarea name="note"> 	
//多行文本输入控件,设置name属性

在这里插入图片描述

两种按钮：

<iuput type="button">   //将input属性修改成button，按钮控件
<input type="submit"> 	//将input属性修改成submit，表单提交控件

两者区别，button就是一个简单的按钮控件。submit则强大一点，一般需要与form表单标签结合使用，下面是个模拟注册的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title> 
</head>

<body>
    <h1>用户添加</h1>
    <form method="POST" action="/register_ok">
        <div>
            <lable>用户名:</lable>
            <input type="text" name="username"></input>
        </div>
        <div>
            <lable>密码:</lable>
            <input type="password" name="password"></input>
        </div>
        <div>
            <lable>身份:</lable>
            <select name="authority">
                <option>访客</option>
                <option>用户</option>
                <option>管理员</option>
            </select>    
        </div>
        <div>
            <input type="button" value="检测"></input>
            <input type="submit" value="提交"></input>
        </div>
    </form>

</body>
</html>