<!--
input: 通过type属性值的不同,表现出不同的形态
-->
<!-- 1、文本框:text(默认值) -->
昵称:<input type="text"><br><br>
<!-- 2、密码框:password 密文输入 -->
密码:<input type="password"><br><br>
<!-- 3、单选框:radio -->
性别:<input type="radio">男<br><br>
<!-- 4、多选框:checkbox -->
爱好:<input type="checkbox">敲代码<br><br>
<!-- 5、文件选择框:file -->
<input type="file">
例如:
<form>
<!-- 1、文本框:text(默认值)
属性:
1、value:用户输入的数据
如果提前在代码中设置好value属性,设置的就是文本框内容的默认值
2、name:告诉后台发送过去的数据是什么含义
后台接收到的数据格式:
name的属性值=value的属性值
3、maxlength:用户输入的最大字数
昵称:<input type="text" value="可爱的燕燕" name="nickname" maxlength="6"><br><br>
<!--
后端接收到的数据是???
可爱的燕燕
当写了name属性之后,此时后台接收的数据是什么???
nickname=可爱的燕燕
-->
<!-- 2、密码框:password (密文输入)
属性:
1、value:用户输入的数据
如果提前在代码中设置好value属性,就是密码框内容的默认值
2、name:告诉后台发送过去的数据是什么含义
3、maxlength:用户输入的最大字数
密码:<input type="password" value="233333" name="password" maxlength="6"><br><br>
此时后台接收的数据:
233333
此时后台接收的数据:
password=233333
<!-- 3、单选框:radio
属性:
1、name:
告诉后台发送过去的数据是什么含义
分组:有相同name属性值的单选框为一组,一组中同时只能有一个单选框被选中!!!!
2、value:用户选择的数据
3、checked:默认选中 可以省略属性值
性别:<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="women" checked>女<br>
<!--
后台接收的数据:
sex=women
-->
<!-- 4、多选框:checkbox
属性:
1、name:告诉后台发送过去的数据是什么含义
2、value:用户选择的数据
3、checked:默认选中
-->
爱好:<input type="checkbox" name="hobby" value="code" checked>敲代码
<input type="checkbox" name="hobby" value="nosleep">熬夜
<input type="checkbox" name="hobby" value="nohair">掉头发<br><br>
<!--
后台接收的数据:
hobby=code
-->
<!-- 5、文件选择框:file
属性:
1、(html5)multiple:多文件上传 可以省略属性值
-->
<input type="file" multiple><br>
<!--
表单按钮:input标签
如果需要实现按钮的功能,需要配合form表单(form标签)一起使用
直接用form标签把所有的表单标签一起包裹起来
<!--
1、提交按钮:submit
nickname=可爱的燕燕&password=233333&sex=women&hobby=code
-->
<input type="submit">
<!--
2、重置按钮:reset
让内容回复成默认值!!!!
-->
<input type="reset">
<!-- 3、普通按钮:button
需要通过value属性,来设置按钮上的文
默认是没有特殊的功能
其实普通按钮,配合js来使用!!
-->
<input type="button" value="普通按钮">
<!--
4、图片按钮:image
样式:就是一张图片
功能:其实就是提交按钮
-->
<input type="image" src="im.jpg">
<input type="text"><br>
<input type="password"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="file"><br>
<input type="submit">
<input type="reset">
<input type="button"><br>
<input type="image" src=""><br>
</form>