• 目录

input标签

阅读量: 539 编辑

input标签

网页中的输入框。

一、语法介绍

<form>
	<input type="text" name="username" value="qicong" />
</form>
  • 标签 <input> ,主要用于页面数据的填写,然后将数据提交到服务器端。比如我们最长使用的 用户名、密码 ,就是 input 输入框完成的

  • 主要写在 form 标签中,通过 form 提交将数据提交到后台

  • 属性 name:我们提交数据的时候,后台根据 name 来取前端传过去的数据

  • 属性 value:就是用户填写的数据

  • 属性 type 类型包括 :text(文本输入)、password(密码输入)、file(选择文件)、chekbox(复选框)、radio(单选框)

二、代码实战

代码的详细解读,可以参考视频教程。

新建 html 文件 13-input.html ,编写下方程序,运行看看效果吧

<!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>input输入框标签</title>
    </head>
    
    <body>
        <form action="/submit.do" method="get" >
            <div>姓名:<input onchange="handleChange()" name="name" id="xingming" value="zhangsan"/></div>
            <div>密码:<input name="passwd" id="mima" type="password"/></div>
            <div>年龄:<input name="age" type="number"/></div>
            <button type="submit">提交</button>
        </form>

        <script type="text/javascript">
            function handleChange(){
                alert('姓名的内容修改了')
            }
        </script>

    </body>
</html>


  • 目录