表单的元素和样式表

<body>
<form action="ae.html" method="post">
<input type="text" name="gandong" value="hello"/>
<input type="password" name="gandong value="1234"/>
<input type="hidden" name="cyq" value="我爱你"/>
<textarea name="wxx">请问都去玩弄我年轻哦等会我打时间快点哈杀佛气温哦我掐死等你撒地好大啊分开就放不开家常便饭哈大的丢啊打死都

不发阿姐</textarea>
<input type="button" name="jy" value="蛮王"/>
<input type="submit" name="jy1" value="赵信"/>
<input type="reset" name="jy3" value="剑豪"/>
<input type="image" src="../图片/0.jpg" value="tupian”/>
<input type="radio" name="d单选" value="男">男
<input type="radio" name="d单选" value="女">女
<input type="checkbox" name="武器" value="tm">tm
<input type="checkbox" name="武器" value="zx">zx
<input type="checkbox" name="武器" value="aike">aike
</form>
<select>
<option value="001"> 汉族</option>
<option value="222">回族</option>
<option value="002">蒙古族</option>
</select>
<input type="file" name="浏览器">

</body>
</html>
表单元素
把用户写的内容传递给程序看
form(表单)在代码中出现几次就代表就会有几个表单出现
acction的属性是规定把数据传递给某个网页,具有一定的指向性。
method的属性是数据的传递方式,有两种传递方式1.get传递方式:能显示出提交的数据,但传递的数据在长度上有限制。2.post传递方式:不显

示传递的数据,没有长度的限制。post是常用的数据传递的方式。
表单的元素分为文本、按钮、选择输入和其他属性。
文本属性又分为1.文本框2.密码框3.隐藏域4.文本域,他们都有一个单标签<input>
一。文本
1文本框是用户来写文字内容用的,制作文本框需要使type="text"要给文本框起个名字用name="名字",用value的值来显示我们在文本框中显示

的内容,value="内容"
<input type="text" name="名字" value="要显示的内容">
2.密码框是在输入密码的时候使用,会把用户输入的内容变成特殊的字符,和文本框一样都要起个名字和我们我输入的内容,用

name="migzhi",value="密码框",在制作密码框的时候需要把type="password"
<input type="password" name="migzhi" vaiue="密码框">
3.隐藏域是不再浏览器中显示的会隐藏在后台运行,做隐藏域的时候就要使type="hidden" 也要起个名字,在value输入要隐藏的内容;可以用

在不想让用户,但又想提交的时候。
<input name="yincangyv"value="隐藏域">
4.文本域是可以用来写大篇文章的,因为文本框不管写多少字只在一行中显示看不见全部的内容,这个时候就要用文本域了。文本域是个双标签

<textarea></textarea>来写大片的文章,在文本域中还要有一个名称。
<textarea name="文本域">内容</textarea>
二。按钮
按钮和文本一样都是用input单表签的,
1.普通按钮(button)
是一个规定的按钮,需要把tape="button",加上按钮名称,在value上输入要在按钮上面显示的文字。
2.提交按钮
点击提交按钮会把表单提交到action="ae.html"页面 tape="submit"在value上输入要在按钮上面显示的文字。
3.重置按钮
是把用户原来的内容重新回到原来的状态,tape="reset"在value上输入要在按钮上面显示的文字。
4.图片按钮
是把照片导入到里面tape="image"+src="图片的位置"在value上输入要在按钮上面显示的文字。
三。输入选择类input
1.单选按钮
是一个二选一的按钮 type="radio"
例子:<input type="radio" name="段暄" vadio="男">男
<input type="radio" name="段暄" vadio="女">女
把多name值改成一样的才能出现单选效果。
2.多选按钮(复选框)
复选框是以方格的形式显示的,在复选框的内容要现实的时候它的name的值也要一样,type="cheakbox"。
3下拉列单
<select></select>也是表单的元素加name="名字"是最外层的标签
里层的标签是<option></option>代表项在下拉列单里的内容在这里面填写。
在<option>中加上valoue的值就有了代号了
在提交的时候就显示valoue的值,不现实下拉列单里的内容了,
4.选择文件
做文件上传的功能,input tapy="file"name="名字",在不同的浏览器中显示的界面是不一样的。
总结:属性name在所有的表单中都可以写,除了在按钮属性之外的属性中都要写,
value的属性在按钮中必须写value值,其他的不用写,value是让用户自己输入的。
四其他属性
readonly可以加在每一个表单里面,只能看不能写
disabled(不可用)加入表单中表示这个表单不可用也不能提交。
hidden假如代码中起隐藏该代码的作用
checked(用在单选和复选当中)默认选中。
selected(用在下拉列表中,设置哪一项选中)
五。框架分为两种:iframe 在网页中加入别的网页,frameset框架集,如果是有那个框架集不能写在boby中
<ifarme src="加入的网页位置" width="网页宽度的大小" heihht="网页高度的大小" ></ifarme>
frameboder如果等于0就能把滚边框去掉,scrodling="no"是把滚动条去掉
2.frameboder可以使网页进行拆分,cols是把网页左右拆分cols="第一个网页的像素比例,*代表剩下的所有的像素比例"
<frame src="加入的页面位置">
rows是把网页进行上下拆分
六。<maquee="wenz">可以使文字进行滚动
direction="滚动的方向"2<mark></mark>是用来标记关键字<span><mark>wenzhi文字</mark></span>
3<hr/>单元素标签,做分割线使用
<hr/>
<span><mark>wenzi</mark>文字</span>
<hr/>
六。样式表 给网页的标签进行美化,分为
1.内联样式表 是写在某个标签里面的 <style="样式"> <div style="样式">内容</div>代码重用性差,但代码页面比较乱
2.内嵌样式表 是写在<head>里面的<style type="样式">内容</style>代码重用性好,控制性不精确
3.外部样式表 是一个单独的样式表引入方式建一个新的网页点击右键-css样式表代码重用性最好,控制不精确。
<linkhref="test.css"rel="stylesheet"type="text">
内联的优先级最好其次是内嵌最后是外部
内联的样式表写法<div style="color:颜色,">内容</div>如果加入别的样式用“;”分割
样式表的格式:样式名:样式的值
内嵌的选择器:
1.*代表所有的元素
2.id #代表id 根据每个元素的特殊标志来选择,在同一网页中id的名字不能一样 不能用汉字和数字开头 #(id)id的值(样式)
3. 累 class同一类 用.来表示class .CLASS的名字(样式)
4.标签选择器
直接写标签的名字(样式) 注释用/*注释的内容*/
选择器的优先级:标签>*所有元素,class>标签,ID>class 越精确的优先级越高id>CLASS>标签>*
复合选择器:
1.并列 两个选择器之间有逗号分割
2.空格:后代关系 #外层标签(id名)空格后代
3筛选 div。c1找到标签然后找到class名为c1 .代表class 只能找class的的标签

时间: 2024-10-23 10:17:45

表单的元素和样式表的相关文章

表单,框架,样式表的分类及选择器基础

表单元素1.<from>代表表单,其中属性有action提交给你所设定的页面,method数据提交的方式(get显示提交有长度限制,post隐式提交). 2.文本的表示类型:1.文本框<input>其属性有type类型选择其中的text,valune是文本框的值,name是文本框的名称.2.<input>密码框,其中属性tybe选择password.3.隐藏域其tybe选择hidden.4!文本域用双标签<textarea>,他的值是写在开始和结束标签之间的

表单的属性和方法, 获取表单和表单的元素, 验证表单

表单的属性和方法 一. 表单字段的属性(id/name/value/form),这里用value属性来举例 上面的form属性代表获取表单字段的父级表单对象 1. 属性的获取         console.log(document.myform.username.value); 2. 属性的设置            document.myform.username.value="123"; 3. 获取表单字段的父级表单对象 console.log(document.myform.u

表单及表单新增元素

要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解. 表单的基本了解  <form> 元素用于用户输入数据的收集  <input> 元素是最重要的表单元素,有许多type其中<input type="submit">是用于向表单处理程序提交表单的按钮.  <select> 元素<option> 元素定义待选择的下拉列表选项,  <textarea> 元素定义文本区域.  <button&

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

HTML笔记三,表单相关元素和属性

表单元素 <form>:用于生成输入表单,该元素不可视化 action:指定当前表单提交的地址,必填 method:指定提交表单时发送何种类型的请求,post或者get,一般post,必填:其中GET方式可以在地址栏种看到传送的数据,POST方法看不到较安全 enctype:指定对表单内容进行编码的字符集 name:名称 target:以何种方式打开目标url,_self,_blank,_top,_parent四个中的一个 <input>: type= text:单行文本框 pas

H5表单新增元素和属性

1.form--把要提交的内容指定特定表单,而这个要提交内容不需要被包含在特定表单中. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="" id="testfor

jQuery获取表单各元素的值

radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio']").eq(1).attr("checked",true);//设置第二项为选中项 <input type="text" name="textname" id="text_id" value="&quo

关于表单form元素中onsubmit事件处理机制的认识

博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件是这么写的 :onsubmit="return validateForm();",首先validateForm()已经有返回值了,为什么在这里还要加一个return??这让我百思不得其解,直到看到一篇博文才恍然大悟,受益匪浅,以下是这篇博文的出处:http://blog.163.com/h

js 表格、表单、元素尺寸和位置

复习 DOM : document object model DOM节点关系属性 childNodes 元素\注释\文本 children 元素 firstChild 第一个子节点 firstElementchild 第一个元素子节点 lastChild lastElementChild parentNode offsetParent previousSibling previousElementSibling nextSibling nextElementSibling 节点增删改,复制 do