本帖最后由 鱼丸儿 于 2017-11-7 10:38 编辑
上次课程我们学习了表单的form标签，今天我们将完成关于表单标签的后续学习。表单大体上包含两个部分，表单框架form标签，以及表单控件两部分，今天整天我们学习表单控件
一、表单控件
1.1单行文本框
[PHP] 纯文本查看 复制代码 用户名<input type=”text” name=”名称” value=”值” />
这里的type属性为text
在浏览器中的显示效果为
单行文本框主要用于输入简单内容使用，如上图的 名字，还有例如身份信息，地址，学历等简单内容使用。
代码中需要注意的地方为：
type类型中
type = “text”
且后续存在两个属性，name=“名称” value=“值”这两个属性将会在PHP的学习中为大家讲解
1.2单行密码框 [PHP] 纯文本查看 复制代码 <input type=”password” name=”名称” value=”值” /> 单行密码框主要用于输入密码使用，如上图的 登录密码显示。
代码中需要注意的地方为：
1、type类型中 type = “password”
2、单行密码框输入内容的显示效果与上面的单行文本框不同，单行密码框的输入内容不会以明文形式显示，而是以上图的.........形式代替，这也相对好理解，因为输入的密码不想被外人看到所以以.......的形式隐藏。
1.3单选按钮 [PHP] 纯文本查看 复制代码 <input type=”radio” name=”名称” value=”值” checked=”checked” /> 1、type类型中 type = “radio”
一组单选按钮一定是只能选择一个 单选按钮是一组相互排斥的按钮！ 如何实现相互排斥的按钮：将它们的name属性值设置为一样 checked：表示被选中 这个属性本身没有值 就等于其自己 1.4多选按钮 [PHP] 纯文本查看 复制代码 <input type=”checkbox” name=”名称” value=”值” checked=”checked” /> 1、type类型中 type = “checkbox” 一组多选按钮name属性值也要一样！ checked：表示被选中 这个属性本身没有值 就等于其自己
在介绍过几个input提交按钮后，我们来学习按钮控件，在这里我们主要学习三款提交控件。
1.5按钮
提交按钮 [PHP] 纯文本查看 复制代码 <input type=”submit” name=”名称” value=”值” /> 重置按钮 [PHP] 纯文本查看 复制代码 <input type=”reset” name=”名称” value=”值” /> 将表单中表单控件标签输入的内容将其重置！ 图片按钮 [PHP] 纯文本查看 复制代码 <input type=”image” src=”图片的地址” /> 图片按钮它具有将表单进行提交的功能 同时它会将鼠标点击图片上面的坐标值也会进行提交！
上面三个按钮的显示图样为 1.6文件上传 [PHP] 纯文本查看 复制代码 <input type=”file” name=”名称” /> 上传按钮主要负责向服务器上传文件，常见功能有上传一张图片作为头像等。 显示样式为 当然上传控件不单单能上传图片，还能上传其他类型文件，如txt,word,excel等
1.7普通按钮 [PHP] 纯文本查看 复制代码 <input type=”button” name=”名称” value=”值” /> 普通按钮几乎没有什么功能 它一般需要配合JavaScript来使用！ 1.8隐藏域 [PHP] 纯文本查看 复制代码 <input type=”hidden” name=”名称” value=”值”/> 隐藏里面的表单控件我们在浏览器上面是看不见的！但是这个数据也可以被提交给表单的处理程序进行处理！ 对应隐藏域功能在后续的学习中会有体现现在需要大家有印象，以后用到时会详细讲解对应功能
1.9使用<button></button>标签来实现按钮
l 提交按钮 <button type=”submit”>内容</button> l 重置按钮 <button type=”reset”>内容</button> l 普通按钮 <button type=”button”>内容</button> 图片样式为
以上基本介绍完成了input相关的表单控件 一下为练习代码，希望同学完成代码练习，达到融会贯通。 [PHP] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件标签</title>
</head>
<body>
<form action="">
<p>用户名：<input type="text" name="user" /></p>
<p>密 码：<input type="password" name="pass" /></p>
<p>性别：男-<input type="radio" name="sex" value="男" checked="checked" />女-<input type="radio" name="sex" value="女" /></p>
<p>爱好：
蓝球：<input type="checkbox" name="hobby" value="蓝球">
足球：<input type="checkbox" name="hobby" value="足球" checked="checked">
写代码：<input type="checkbox" name="hobby" value="coding">
</p>
<p>
上传图片：<input type="file" name="image" />
</p>
<p>
<input type="hidden" name="sysid" value="10086">
</p>
<input type="submit" value="登录">|<input type="reset" value="重置">
<input type="image" src="./images/btn02.png" />
<input type="button" value="普通按钮" />
<hr />
<!--使用button标签来实现提交|重置|普通按钮-->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>
最后为大家介绍两个非input表单控件
二、input表单控件
2.1下拉列表 [PHP] 纯文本查看 复制代码 <select name=”名称”>
<option value=”值”></option>
<option value=”值” selected=”selected”></option>
<option value=”值”></option>
</select>
这是一个组标签，option为下拉框的选项，value对应选项值。
selected：这个属性表示被选中 这个属性本身也没有值 其值也要等于自己
2.2文本域 [PHP] 纯文本查看 复制代码 <textarea cols=”列数” rows=”行数” name=”名称”></textarea> 文本域是添加文字比较多的时候使用的一款表单控件 以上就是今天要学习的表单控件的全部内容希望同学们可以认真学习，完成今天的代码书写，我们下次课程再见。
阅读推荐
【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签
【黑马程序员杭州】PHP课程笔记day02-HTML组标签
【黑马程序员杭州】PHP课程笔记day03-HTML网页框架及表单标签
【黑马程序员杭州】PHP课程笔记day05-CSS基础 | 
收藏
淘帖
踩
