8.4.1 input输入表单元素
#<input />标签：用于收集用户信息，单标签
属性值：
1. type属性：根据不同的type属性值，输入字段拥有很多种形式，如文本、复选框、掩码后的文本控件、单选按钮等
文本框：<input type="text" />
单选按钮：<input type="radio" />
重置按钮：<<input type="reset" /> 还原为表单的初始状态
提交按钮：<input type="submit" /> 把表单域里数据提交给服务器
提交按钮里的文字一般是提交，要改变的话加value属性：<input type="submit" value="注册"/>
普通按钮：<input type="button" value="发送验证码"> 后期结合js
文件域：<input type="file"> 点击上传文件
2.name属性是表单元素的名字
<input type="text" name="username" />
要注意的是单选的选项必须有相同的名字才能实现多选一的效果
复选框的选项也必须有相同的name属性
3.value属性用于定义input元素的值
<input type="text" name="username" value="请输入用户名" />
注意！
1.name属性和value属性是每个元素都有的属性，主要是给后台人员使用的
2.name属性 表单元素的名字，要求单选按钮和复选框有相同的name值
4.checked属性表示某元素首次加载时就应当被选中
主要针对单选按钮和复选框
单选：只能给一个元素checked
<input type="radio" name="sex" value="沃尔玛购物袋" checked="checked">沃尔玛购物袋
复选框：可以给多个
5.maxlength属性规定可输入字符最大长度
<input type="text" name="username" value="请输入用户名" maxlength="8">
试试代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input表单元素</title>
</head>
<body>
<form action="xxx.php" method="get">
<!-- 示范 -->
<!-- text 文本框，用户可以输入文字 -->
用户名：<input type="text"><br>
<!-- value属性 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="8"><br>
<!-- maxlength属性 规定可输入字符最大长度-->
<!-- password 密码字段，输入被掩码-->
密码：<input type="password" name="pwd" ><br>
<!--radio 单选按钮，实现多选一-->
<!-- 还未实现单选 -->
性别：
<input type="radio">男
<input type="radio">女<br>
<!--radio 单选按钮，实现多选一-->
<!-- 已经实现单选 -->
性别：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<!-- checked属性 代表元素首次加载便被选中 单选只能给一个，多选随便-->
<input type="radio" name="sex" value="沃尔玛购物袋" checked="checked">沃尔玛购物袋<br>
<!-- checkbox 复选框 ，实现多选-->
爱好:
<input type="checkbox" name="hobby" value="吃饭">吃饭
<input type="checkbox" name="hobby" value="睡觉">睡觉
<input type="checkbox" name="hobby" value="打豆豆">打豆豆<br>
<!-- 重置按钮reset 可以还原表单的初始状态 -->
<input type="reset">
<input type="reset" value="重新填写"><br>
<!-- 提交按钮submit 可将表单域中的文字提交给服务器 -->
<input type="submit">
<input type="submit" value="免费注册"><br>
<!-- 普通按钮button 后期结合js -->
<input type="button" value="发送验证码"><br>
<!-- 文件域 点击上传文件 -->
<input type="file">
</form>
</body>
</html>6.属性小结：你记住了吗？
#<label>标签 定义标注标签
<label> 标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上：
比如在选择性别时，不需要点击单选按钮，只需要点击单选按钮的文字"男"，即可选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label标签</title>
</head>
<body>
<form action="xxx.php" method="get">
性别：<br>
<input type="radio" name="sex" value="男" id="男"> <label for="男">男</label> <br>
<input type="radio" name="sex" value="女" id="女"> <label for="女">女</label> <br>
<input type="radio" name="sex" value="沃尔玛购物袋" checked="checked" id="沃尔玛购物袋"><label for="沃尔玛购物袋">沃尔玛购物袋</label><br>
</form>
</body>
</html>版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mkjdt/604.html