Web前端开发基础 第三课(与浏览者交互)

语法:

<form   method="传送方式"   action="服务器文件">

讲解:

1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method  数据传送的方式(get/post)。

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>

注意:

1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息可提交不到服务器上哦!)。

2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框

语法

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

1、type:

   当type="text"时,输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

举例

<form>
  姓名:
  <input type="text" name="myName">
  <br/>
  密码:
  <input type="password" name="pass">
</form>

在浏览器中显示的结果:

时间: 2024-11-08 19:19:54

Web前端开发基础 第三课(与浏览者交互)的相关文章

Web前端开发基础 第四课(CSS元素模型)

css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模

Web前端开发基础 第四课(CSS一些性质)

继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签. p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 可见右侧结果窗口中p中的文本与span中的文本都设置为了红色.但注意有一些css样式是不具

Web前端开发基础 第四课(颜色值)

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色. p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也

Web前端开发基础 第四课(认识CSS样式)

CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img> 类选择器 ID选择器 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标

Web前端开发基础 第四课(CSS小技巧)

水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> css代码: <style> div.txt

Web前端开发基础 第四课(CSS元素分类)

元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>

Web前端开发基础 第四课(CSS文字和段落排版)

文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体.(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.)现在一般网页喜欢设置“微软雅黑”,如下代码: body{font-family:"Micro

Web前端开发基础:HTML、CSS、JavaScript分别实现什么功能?

相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题

Web前端开发基础 第一天(Html和CSS)

学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点