多进程 Apache Pivot教程 Hibernate wpf xcode api ios7 oracle分页关键字 oracle删除字段sql cpm计算 python输入输出 python的range python包 java接口类 java中的string java如何使用 java重命名 java开发语言 linux文档 不寻常的指南针 bat脚本 无限视距 js刷新页面 给视频加字幕的软件 linux定时任务 pr书写效果 网页自动点击 松下plc编程软件 平面设计软件下载 键盘指法练习游戏 方正徐静蕾字体 枪林弹雨辅助 g4560配什么显卡 微信超额20万怎么办 远程桌面管理工具 nonetype 迅捷屏幕录像工具 投屏软件电脑版 python画散点图 百小度
当前位置: 首页 > 学习教程  > 编程语言

表单继续学习及初识css

2020/12/28 19:34:42 文章标签:

表单学习及初识CSS表单表单的高级应用隐藏域只读禁用表单的初级验证PlaceholderRequiredPatternCSSCSS概念CSS3的基本语法结构行内标签内部样式表外部样式表CSS3的基本选择器及语法规则标签选择器类选择器ID选择器小结表单 表单的高级应用 隐藏域 语法&#xff1a; <inp…

表单学习及初识CSS

  • 表单
    • 表单的高级应用
      • 隐藏域
      • 只读
      • 禁用
    • 表单的初级验证
      • Placeholder
      • Required
      • Pattern
  • CSS
    • CSS概念
    • CSS3的基本语法结构
      • 行内标签
      • 内部样式表
      • 外部样式表
    • CSS3的基本选择器及语法规则
      • 标签选择器
      • 类选择器
      • ID选择器
      • 小结

表单

表单的高级应用

隐藏域

语法:

<input type="hidden" name="userid" value="666"/>

文本框里的内用被隐藏,用户看不见

只读

语法:

<input type="text" name="name" value="张三" readonly/>

文本框里的内容张三只能看不能修改

禁用

语法:

<input type="submit" value="保存" disabled/>

保存按钮不可用

表单的初级验证

表单验证的好处:
1、减轻服务器的压力
2、保证数据的可行性和安全性

Placeholder

语法:

<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		搜索:<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
	</body>
</html>

网页效果图:
在这里插入图片描述

Required

语法:

<input type="text" name="username" required/>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>昵称:<input type="text" name="username" required /></p>
		<p><input type="submit"/></p>
	</body>
</html>

网页效果图:
在这里插入图片描述

Pattern

语法:

<input type="text" name="tel" pattern="1[358]\d{9}"/>

用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单。

CSS

CSS概念

Cascading Style Sheet 级联样式表
表现HTML或XHTML文本样式的计算机语言(包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定)

CSS3的基本语法结构

选择器 { 声明1;
声明2;
…}

style标签

语法:

<style type=“text/css”>
h1 {
    font-size:12px;
    color:#F00;
}
</style>

行内标签

语法:

<h1 style="color:red;">文本</h1>
<p style="font-size:14px;color:green;">文本</p>

内部样式表

CSS代码写在<head><style>标签中
优点:方便在同页面中修改样式
缺点:不利于多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

语法:

<head>
  <style>
  h1{
  color:red;
  }
  </style>
</head>

外部样式表

CSS代码保存在扩展名为.css的样式表中
语法:

<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

CSS3的基本选择器及语法规则

标签选择器

语法:

<style type=“text/css”>
h1 {
    font-size:12px;
    color:#F00;
}
</style>

类选择器

语法:

<标签名 class="类名称">标签内容</标签名>
<style type=“text/css”>
.class {
    font-size:12px;
    color:#F00;
}
</style>

ID选择器

语法:

<标签名 id="类名称">标签内容</标签名>
<style type=“text/css”>
#id {
    font-size:12px;
    color:#F00;
}
</style>

小结

1、标签选择器直接应用于HTML标签
2、类选择器可在页面中多次使用
3、ID选择器在同一页面中只能使用一次
4、优先级:ID选择器>类选择器>标签选择器


本文链接: http://www.dtmao.cc/news_show_550305.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?