CSS 表单

1.表单的工作原理:

2.表单的写法:

3.表单的常用代码及表现形式:

<body>

<form action="http://www.miaov.com/" method="get" target="_blank">
提交按钮:<input type="submit" value="提交OK" name="" />
<br/><br/>
文本框:<input type="text" name="" />
<br/><br/>
密码框:<input type="password" name="" />
<br/><br/>

单选按钮:
<input type="radio" name="gender" id="a" /><label for="a">男</label>

<input type="radio" name="gender" id="b" /><label for="b">女</label>
<br/><br/>

<!--
checked  默认选中
disabled 禁用
 -->
复选框:
<input type="checkbox" name="" disabled />宅
<input type="checkbox" name="" disabled />腐
<input type="checkbox" name="" />逛街
<input type="checkbox" name="" />健身
<input type="checkbox" name="" />直排
<input type="checkbox" name="" checked/>旅游
<input type="checkbox" name="" />美食

<br/><br/>
<hr/>
上传:<input type="file" name="" />
<br/><br/>
图片:<input src="sun.jpg" type="image" name="" />
<br/><br/>
按钮:<input  type="button" name="" />
<br/><br/>
重置:<input  type="reset" name="" />
<br/><br/>
隐藏:<input  type="hidden" name="" />
<br/><br/>
<hr/>
下拉选框:
<select>
    <option>1999</option>
  <option>1998</option>
  <option selected>1997</option><!-- 默认选中 -->
  <option>1996</option>
  <option>1995</option>
</select>
<br/><br/>
文本域:<textarea name="comments" rows="10" cols="48"></textarea>
<!-- H5新元素 -->
<input type="number" min="0" max="20"/><!-- 限制只输入数字 -->
<input type="range" min="0" max="20" step="5"/><!-- 类似number的滑动条,step是步长 -->
<input type="color" /><!-- 颜色选择器 -->
<input type="date" /><!-- 日期选择控件 -->
<input type="email" /><!-- 文本输入,但是在移动浏览器上会得到输入email的定制键盘 -->
<input type="tel" /><!-- 类似于email,弹出定制键盘 -->
<input type="url" /><!-- 如上 -->
</form>

4.表单css重置:

form{margin:0;}
input{margin:0;padding:0;}
select{margin:0;}
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}

5.name的工作方式:

6.get和post的区别:

时间: 2024-07-31 12:36:48

CSS 表单的相关文章

Web标准:九、CSS表单设计

Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<input type="text" value="" class=""> 给这些文本框增加css样式,改变他们的样式: 最终显示效果如下: 文本域标签:<textarea id="" class="" r

js 节点 document html css 表单节点操作

节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子节) 可以使用元素对象的方法进行代替:getElementById().getElementsByTagName() (2)节点属性的操作:setAttribute().removeAttribute().getAttribute() (3)节点的创建.删除.追加: 创建节点:document.createElement(tagName) 删除节点(必须父节点

CSS表单属性

一般来说,表单在一个页面中是必不可少的,下面是我对表单的知识总结: 依次要说的是表单元素.表单属性.以及表单提交(js知识) 1,表单元素: <form action="提交的位置 //不写的话会提交给自身" method="如何发送表单数据"></form> form内的元素: 1)datalist(数据列表) 2)keygen(生成加密字符串) 3)output(输出结果) 4)meter(度量器) 2,表单属性:   1)palceho

Bootstrap CSS 表单

表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. 向所有的文本元素 <input>.<textarea&g

CSS 表单元素不继承body的字体属性

<style type="text/css"> <!-- body { font-family: ; font-size:; } input, label, select, option, textarea, button, fieldset, legend { font-family: ; font-size:; } --> </style>

css - 表单元素默认样式美化 - 单选框

单选框 HTML代码 样式 .radio input{ visibility: hidden;}.radio label{ position: relative;}.radio label:after{ content: "";/*必须设置*/ display: inline-block; width: 20px; height: 20px; border: 1px solid #5dbd5d; position: absolute; top: 0px; left: -32px; bo

使用fieldset标签结合CSS Lable实现表单的布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS表单</title> &

【转载】6款漂亮HTML CSS样式用户留言表单

首先我们要在网页中加上常用的几个标签文本,比如姓名,电子邮件,内容以及提交按钮,然后我们针对这些字段文本增加和修改样式就可以. <form action="" method="post" class="STYLE-NAME"><h1>Contact Form<span>Please fill all the texts in the fields.</span></h1><labe

仿苹果电脑任务栏菜单&amp;&amp;拼图小游戏&amp;&amp;模拟表单控件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-