input标签
网页中的输入框。
一、语法介绍
代码语言:javascript复制<form>
<inputtype="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>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>input输入框标签</title>
</head>
<body>
<formaction="/submit.do"method="get">
<div>姓名:<inputonchange="handleChange()"name="name"id="xingming"value="zhangsan"/></div>
<div>密码:<inputname="passwd"id="mima"type="password"/></div>
<div>年龄:<inputname="age"type="number"/></div>
<buttontype="submit">提交</button>
</form>
<scripttype="text/javascript">
function handleChange(){
alert('姓名的内容修改了')
}
</script>
</body>
</html>