前端html表单与css样式

h2 { background-color: green }

1,from标签

  from标签的功能是向服务器传输数据,实现用户交互的重要标签。

from标签的具体使用:

  input标签使用示例:

 

 <from action="" method="post">
        <p>姓名:<input type="text" name="names"> </p>

        <p>用户名:<input type="text"  name="username"> </p>
        <p>密码:<input type="password" name="pwd"> </p>
        <p>爱好:骑车<input type="checkbox"  name="hobby1" checked="checked">
                 游戏<input type="checkbox" name="hobby2">
                 电影<input type="checkbox" name="hobby3">
        </p>
        <p>男<input type="radio" name="sex">女<input type="radio" name="sex"></p>

第一句:action标签的意思就是表单提交到服务器的链接地址,method标签,表明表单的提交方式为post响应格式

第二句:指定一个姓名表格input标签,type表明该栏使用的格式为指定的“text”文本格式,name指定该栏传递的值为“username“

第五句:checkbox标签的意思是多选框。

最后一句:type类型为单选框,其后的name值为单选项值,指定为同样值。

多级菜单标签:

select标签操作

   <select name="province" size="2" multiple="">
            <optgroup label="china">
                    <option value="hebei">河北省</option>
                    <option value="henan">河南省</option>
                    <option value="shanxi" selected="selected">山西省</option>
                    <option value="shandong">山东省</option>
            </optgroup>
        </select>

name指定菜单的值,size指定可以默认显示几行数值,mutiple:是否可以复选

optgroup是菜单中的分组,联合label标签指定分组名

option显示每级菜单的值,value指定传输值

selected标签在option标签中使用,显示此菜单项是否为多级菜单默认显示的值

以下是网页示例:

提交表单按钮

<p><input type="submit" name="submit"> </p>

同样使用input标签,使用name指定值。

提交表单按钮在表单最后使用,提交表单以上内容。

css层叠样式表

css规则有两个主要部分构成:选择器,一条或多条声明

示例:

<style>
        p{color: red;
        font-size: 20px;
        }
        div{
            color: green;}
    </style>

使用方式为:标签名加上大括号,在大括号内添加属性值   属性:值

css样式的四种引入方式

行内式:

<h1 style="color: red;font-size: 20px" >用户注册</h1>

行内式可以针对一行内容进行样式的设置,优点是可以针对性的进行显示一行样式,缺点是无法进行批量改变。

嵌入式:

嵌入式是在head网页头中输入样式,可以对便签进行批量操作

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{color: red;
        font-size: 20px;
        }
        div{
            color: green;}
    </style>
</head>

此段示例内容针对标签p进行样式改变。

链接式:

可以把css样式内容写入到文件中,然后导入到html文件中使用,链接式的优点是一个样式可以导入到多个网页文件中,批量使用

<link rel="stylesheet" href="csshtml.css">

导入式:(了解)

将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:

<style type="text/css">

          @import"mystyle.css"; 此处要注意.css文件的路径

</style> 

导入式的缺点是网页在打开比较慢时,网页内容不会显示样式,直接显示网页内容原始样式,且导入式是最后才打开网页样式。

时间: 2024-11-05 19:31:08

前端html表单与css样式的相关文章

html表单输入框css样式美化特效源代码下载

html表单输入框css样式美化源代码,响应鼠标动作 原文:html表单输入框css样式美化特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463335926784.htm 源代码截图:

Django系列之form渲染表单后css样式丢失

最通用的form写法 我们经常看各大网站上写这样的form写法 class SYSAdminPhysicalForm(forms.ModelForm): ''' this form for idc's admin ''' class Meta: model = models.Machinepro exclude = ["m_inside_ip","m_outside_ip","order"] business_unit = forms.CharF

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异. ?那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景:如: input:-webkit-autofill { -webkit-box-shadow: 0 0

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

css修改 表单placeholder的样式

1.表单中经常出现提示性文字,placeholder是最常用的一种方式,下面就来讲解一下如何设置placeholder的样式 ::-webkit-input-placeholder{  color:red;padding:5px; } :-moz-placeholder{  color:red;padding:5px;   } ::-moz-placeholder{  color:red;padding:5px;   } :-ms-input-placeholder{ color:red;pad

DOM针对表格表单以及CSS

1.表格操作(只针对表格) -创建 tableElement.insertRow(position) - 新增一行 rowElement.insertCell(position) - 新增一个单元格 (这里需要注意的是:position从0开始) -删除 tableElement.deleteRow(position) rowElement.deleteCell(position) -访问 tableElement.rows - 表格中的行 rowElement.cells - 行中的列2.表单

知问前端——Ajax表单插件

传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款form.js表单的Ajax提交插件将解决这个问题. 一.核心方法 官方网站:http://malsup.com/jquery/form/ form.js插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. 若没有结合其他插件.js.jQuery里的submit()方法时,就用ajaxForm()提交表单. 若用js.jQuery里的submit()方

PHP自动生成前端的表单框架

<?php /** * 为当前所在菜单项样式 * @param string $controller_name * @param string $action_name * @param string $style * @return string */ function activedLink($menu_item, $style) { if(isset($menu_item["checked"]) ) { return $style; } } /** * 得到gravatar