HTML CSS之FORM

form 表单 常用于收集不同类用户的输入,允许用户收集:文本域(text)、下拉列表(select)、单选框(radio)、复选框(checkbox) 以及动按纽(Action)

表单标签

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义一个控制的标签
<fieldset> 定义域
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮

大多数表单标签都是input标签,输入类型是(type)定义的。

例:<form>

<input type="text" name="first_text">

<input type=‘text‘ name="address" value="广东">   当需要默认值时用 value属性

<input type="radio" name="姓别" value="boy">

<input type="radio" name="姓别" value="boy" checked="selected" / >(默认选中)  单选

<input type="checkbox" name="老虎">

<input type="checkbox" name="地名",value="江西" checked="selected">   (默认选中) 多选

下拉列表使用到的元素为: select  属性为:option

例:

<select>

<option value="dongfong">东风</option>

<option value="qq" selected="select" >寄瑞</option>  selected为默认选择属性 <option value="jili">吉利</option>

</select>

</form>

本例演示如何在数据周围绘制一个带标题的框。

<form>

<fieldset>

<legend>健康信息</legend>

身高:<input type="text" />

三围:<input type="text" />

</fieldset>

</form>

Button 按钮的三个属性

submit 该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。
button 该按钮是可点击的按钮(Internet Explorer 的默认值)。
reset 该按钮是重置按钮(清除表单数据)。
<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>
时间: 2024-10-14 23:20:42

HTML CSS之FORM的相关文章

css form 表单组

2014年7月1日 15:31:17 第一次写css,见谅 css: 1 /*form*/ 2 /*default*/ 3 .form-box .form-group .form-label {text-align: right; width: 200px; height: 33px; line-height: 33px;} 4 .form-box .form-group .form-input {text-align: left; width: 200px; height: 33px; dis

CSS框架960Grid从入门到精通一步登天

http://blog.chinaunix.net/uid-22414998-id-2878529.html 1.什么是CSS框架? CSS框架是一种你能够使用在你的web项目中概念上的结构,是别人已经写完的,而且很完善的CSS定义集合.CSS框架一般是CSS文件的集合,包括基本风格的字体排版,表单样式,表格布局等等,比如: * grid.css 表格布局 * layout.css 布局 * form.css 表单 * general.css CSS常规设置 2.CSS框架的种类: CSS框架很

css常用效果总结

css有不少常用的效果,你在平时浏览网站的时候可能会看到,但是真的要自己写的时候,有时候会突然忘记,今天稍微对那些常见的效果做一下小结. 1.每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能. 代码如下: html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -m

CSS之旅——第三站 强大的伪选择器

说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼...首先 我们可以在VS里面提前预览一下. 可以看到,上面的伪类有很多很多,多的让我眼都快瞎了...下面就挑一些实用性比较强的说一说. 一  :nth-child 伪选择器 我们知道在jquery中有一种选择器叫做“子类选择器”,对应的有:nth-child,:first-child,:last-child,:only-child,这回在CSS中同样 可以办到,可以说一定程

HTML5 web Form表单验证实例

HTML5 web Form 的开发实例! index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5表单验证</title> 6 <link rel="stylesheet" type="text/css" href="../css/style.

Django forms组件【对form舒心l了】

目录 Django forms组件 bound and unbound form instance forms渲染有关 隐藏一个字段,不渲染它 form 校验 form类 ModelForm 利用ModelForm关键就在于model's field mapping to form's field ModelForm.save() 详解 class Meta !!!重写覆盖默认的modelField字段(即自定义一些modelform属性) form有关多选择Field的使用 form's fi

BootStrap 之 CSS全局样式中的表单

不使用BootStrap 之 CSS全局样式中的表单,自己也不定义CSS样式 <form> <div> <label>Email address</label> <input type="email" placeholder="Email"> </div> <div> <label>Password</label> <input type="p

JavaScript document 对象

1.document属性 cookie -- 用户cookie title -- 当前页面title标签中定义的文字 URL -- 当前页面的URL document代表HTML文档的内容,因此可以通过它表示文档中加载的一些元素,这些元素全部通过集合访问. anchors -- 文档中所有锚(a name="aname")的集合 applets -- 文档中所有applet标签表示的内容的集合 embeds -- 文档中所有embed标签表示的内容的集合 forms -- 文档中所有f

javascript表单验证

表单HTML <form action="" method="post"> <fieldset class="login"> <legend>Login information</legend> <label for="userName" class="hover">UserName:</label> <input type=&q