一天搞定CSS：表单（form）--20
1.表单标签
2.input标签属性与取值
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单标签form
input
取值：text---文本框
password---密码框
radio---单选框
checkbox---复选框（又称多选框）
submit---提交按钮
reset---重置按钮
button---自定义按钮
image---图片按钮
file---上传文件按钮
hidden---隐藏
-->
<form action="http://www.apeclass.com/">
<p>
<input type="text" name="userName" value="用户名" />
</p>
<p><input type="password" name="passWord" /></p>
<p>
<input type="radio" name="sex" value="men" />男
<input type="radio" name="sex" value="women" />女
</p>
<p>
<input type="checkbox" name="interest" value="eat" />吃饭
<input type="checkbox" name="interest" value="sleep" />睡觉
<input type="checkbox" name="interest" value="play" />打豆豆
</p>
<p>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</p>
<p>
<input type="button" value="自定义按钮" />
<input type="image" src="img/img_01.gif" />
</p>
<p>
<input type="file" name="img" />
</p>
<p>
<input type="hidden" />
</p>
</form>
</body>
</html>
效果图
3.label标签
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
label用来辅助input，点击label后能够让对应的input变成可输入的状态
for属性里放的是对应input的id
-->
<p>
<label for="userName">用户名：</label>
<input type="text" id="userName" />
</p>
<p>
<label for="pw" >密码：</label>
<input type="password" id="pw" />
</p>
<p>
<label for="number">手机号：</label>
<input type="text" id="number" />
</p>
</body>
</html>
4.checked默认选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
checked 让表单一上来有一个默认选中的状态
-->
<p>
<input type="radio" name="sex" value="men" />男
<input type="radio" name="sex" value="women" checked="checked" />女
</p>
<p>
<input type="checkbox" name="interest" value="eat" />吃饭
<input type="checkbox" name="interest" value="sleep" />睡觉
<input type="checkbox" name="interest" value="play" checked="checked" />打豆豆
</p>
</body>
</html>
5.disabled和readonly
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
disabled 禁止用户输入，并且这个表单不会被提交
readonly 让表单变成只读状态，这个表单会被提交
-->
<form action="http://www.apeclass.com/">
<p>
<label for="userName">用户名：</label>
<input type="text" name="userName" value="kaivon" disabled="disabled" />
</p>
<p>
<label for="pw" >密码：</label>
<input type="password" name="pw" value="123" readonly="readonly" />
</p>
<p>
<label for="number">手机号：</label>
<input type="text" name="number" />
</p>
<input type="submit" />
</form>
</body>
</html>
效果图
6.下拉框和文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
form{
margin: 0; /*IE6下会有一个margin*/
}
input{
margin: 0;
padding: 0;
outline: none;
}
textarea{
margin: 0;
padding: 0;
resize: none;
overflow: auto;
/*清除轮廓边框，
* 不清除时，鼠标点击文本域时，会看到一个略微放大的效果
*
* 你也可以设置一个outline看一下效果，如下
* /*outline: 5px solid red;*/
* */
outline: none;
border: 1px solid blue;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/">
<select name="area">
<option>北京</option>
<option selected="selected">上海</option>
<option>广州</option>
</select>
<input type="submit" />
<!--style="width: 300px; height: 300px;"-->
<textarea name="text" id="" rows="5" cols="100"></textarea>
</form>
</body>
</html>
一天搞定CSS：表单（form）--20的更多相关文章
- 我和小美的撸码日记(3)之一句话搞定MVC表单页数据绑定与提交
“尼玛哥,你今天有空么?” “今天周日呀,怎么会没空,你这是要约么?麻辣烫凉皮我都吃,在哪儿,我一会儿就到.” “约你妹呀,我昨天都加一天班了,东西到现在还没搞完,你给我快点过来呀,我需要你!” “别 ...
- 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交
另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...
- amazeui学习笔记--css（HTML元素3）--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- HTML ------ 关于表单 Form
Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- HTML（七）HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- HTML中的表单<form>标签
一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...
- [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用
前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...
- Bootstrap~表单Form
回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...
随机推荐
- 初次接触 Android Studio FAQ
1. 2. 3. 4. 6. 7. Tools -> Adnroid -> enable ADB integration 8.官方模拟器太慢,还是自己下个第三方模拟器吧. http:/ ...
- SSE 系列内置函数中的 shuffle 函数
SSE 系列内置函数中的 shuffle 函数 邮箱: quarrying@qq.com 博客: http://www.cnblogs.com/quarryman/ 发布时间: 2017年04月18日 ...
- 2017-2-17,c#基础,输入输出，定义变量，变量赋值,int.Parse的基础理解，在本的初学者也能看懂（未完待续）
计算机是死板的固定的,人是活跃的开放的,初学c#第一天给我的感觉就是:用人活跃开放式的思维去与呆萌的计算机沟通,摸清脾气,有利于双方深入合作,这也是今晚的教训,细心,仔细,大胆 c#基础 1.Hell ...
- 初遇stm32
刚开始接触32,建一个工程都这么费劲,可能是keil安装时一些文件和库没有安装完整,真是坑啊. 回头可能还要从新安装,然后开始新的学习,争取十天之内入门32,在博客园这个强大的技术支持下, 想不入门都 ...
- 读书笔记 effective c++ Item 53 关注编译器发出的警告
许多程序员常常忽略编译器发出的警告.毕竟,如果问题很严重,它才将会变成一个error,不是么?相对来说,这个想法可能在其它语言是无害的,但是在C++中,我敢打赌编译器的实现者对于对接下来会发生什么比你 ...
- 使用validator-api来验证spring-boot的参数
作为服务端开发,验证前端传入的参数的合法性是一个必不可少的步骤,但是验证参数是一个基本上是一个体力活,而且冗余代码繁多,也影响代码的可阅读性,所以有没有一个比较优雅的方式来解决这个问题? 这么简单的问 ...
- bzoj3939 【USACO 2015 FEB GOLD 】cow hopscotch
Description 就像人类喜欢玩"跳房子"的游戏,农民约翰的奶牛已经发明了该游戏的一个变种自己玩.由于笨拙的动物体重近一吨打,牛跳房子几乎总是以灾难告终,但这是没有阻止奶牛几 ...
- java中构造方法和this，static关键字
构造方法: 构造方法是一种特殊的方法,用于创建该类的对象,对对象的数据进行初始化 格式如下: [修饰符] 类名(形参列表){ 方法体 } 特点 A:方法名和类名相同 B:没有返回值类型,连void都 ...
- 573. Squirrel Simulation
Problem statement: There's a tree, a squirrel, and several nuts. Positions are represented by the ce ...
- MYSQL CASE WHEN THEN END 用法
SELECT qr_cash_record.*,CASE WHEN cashrecord_type = 3 THEN (SELECT product_title FROM qr_fundsupport ...