黑马程序员技术交流社区

标题: 【黑马程序员杭州】PHP课程笔记day04表单控件 [打印本页]

作者: 鱼丸儿 时间: 2017-10-29 22:41
标题: 【黑马程序员杭州】PHP课程笔记day04表单控件
本帖最后由鱼丸儿于 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 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>

文本域是添加文字比较多的时候使用的一款表单控件

以上就是今天要学习的表单控件的全部内容希望同学们可以认真学习，完成今天的代码书写，我们下次课程再见。

作者: 鱼丸儿 时间: 2017-11-8 10:50
ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ喜大普奔~~~~~HTML在今天告一段落了，明天开始CSS
不知道大家期待不

作者: huangjinchao.ar 时间: 2017-11-8 11:07
好棒，，，，，

作者: gy_yt 时间: 2017-11-8 11:07
期待期待，哈哈哈

作者: PHP老曹 时间: 2017-11-8 11:08
期待你的CSS，html做的不错。

作者: 秋子菇凉 时间: 2017-11-8 11:08
顶起来！

作者: 刘华莎 时间: 2017-11-8 11:10
顶起来顶顶

作者: nhm 时间: 2017-11-8 11:16
都很给力啊哈哈

作者: 采姑娘的小蘑菇 时间: 2017-11-8 11:19
厉害了我的大黑马

作者: 程代明 时间: 2017-11-8 11:20
不错不错

作者: fangmifang618 时间: 2017-11-8 11:21
文海棒棒哒

作者: 慧-wh 时间: 2017-11-8 11:24
厉害了

作者: 我想和你谈谈 时间: 2017-11-8 11:27
顶起来，高薪之路，从看帖开始

作者: jiahaoxiang 时间: 2017-11-8 11:59
相当用心，不错

作者: 许言 时间: 2017-11-8 12:00
顶顶顶顶顶

作者: 小核桃仁 时间: 2017-11-8 12:00
好厉害，棒棒哒

作者: yuxiaoyi 时间: 2017-11-8 12:09
好期待哦，做的很棒

作者: 人称最美教师 时间: 2017-11-8 14:55
真棒

作者: 奔跑地小少女 时间: 2017-11-8 20:28

鱼丸儿发表于 2017-11-8 10:50
ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ喜大普奔~~~~~HTML在今天告一段落了，明天开始CSS
不知道大家期待不 ...

期待哦！！！鱼丸儿你的头像是你本人么？好喜感

作者: 陈君 时间: 2017-11-8 21:42
大php！！！！！！！

作者: 小浙姐姐 时间: 2017-11-10 14:41
大神PHP!!!赞赞赞

作者: 猫先森 时间: 2017-11-10 17:00
一直在学习都已经忘记了评论。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2