码迷,mamicode.com
首页 > Web开发 > 详细

css及html

时间:2020-06-26 16:37:32      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:安全   operator   pos   标签   用户   tag   单选   option   styles   

HTML

<form> 元素

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单

实例

<form>
.
form elements
.
</form>

HTML 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<hr>

<input> 元素

<input> 元素是最重要的表单元素

<input> 元素有很多形态,根据不同的 type 属性。

文本输入

<input type="text"> 定义用于文本输入的单行输入字段:

实例


<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

单选按钮输入

<input type="radio"> 定义单选按钮

单选按钮允许用户在有限数量的选项中选择其中之一:


<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

 

提交按钮

<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定:


<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GETPOST

何时使用 GET?

您能够使用 GET(默认方法):

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。

何时使用 POST?

您应该使用 POST:

如果表单正在更新数据,或者包含敏感信息(例如密码)。

POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。

本例只会提交 "Last name" 输入字段:

实例


<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

HTML Form 属性

HTML <form> 元素,已设置所有可能的属性

属性描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。


<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
</form>

HTML5 输入类型

HTML5 增加了多个新的输入类型:

  • color

  • date

  • datetime

  • datetime-local

  • email

  • month

  • number

  • range

  • search

  • tel

  • time

  • url

  • week

HTML5 属性

HTML5 为 <input> 增加了如下属性:

  • autocomplete

  • autofocus

  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height 和 width

  • list

  • min 和 max

  • multiple

  • pattern (regexp)

  • placeholder

  • required

  • step

并为 <form> 增加如需属性:

  • autocomplete

  • novalidate

CSS

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。


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

 

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>
?
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。


<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
标签描述
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域(块级)。
<span> 定义文档中的行内的小块或区域。
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<besefont> 定义基准字体。不赞成使用。请使用样式。
<center> 对文本进行水平居中。不赞成使用。请使用样式。

CSS的优势

内容与表现分离

网页的表现统一,容易修改

丰富的样式,使得页面布局更加灵活

减少网页的代码量,增加网页的浏览速度,节省网络带宽

运用独立于页面的CSS,有利于网页被搜索引擎收录

css及html

标签:安全   operator   pos   标签   用户   tag   单选   option   styles   

原文地址:https://www.cnblogs.com/sty-88/p/13195130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!