首页 > 代码库 > 表单的元素和样式表
表单的元素和样式表
<body>
<form action="ae.html" method="post">
<input type="text" name="gandong" value="http://www.mamicode.com/hello"/>
<input type="password" name="gandong value="http://www.mamicode.com/1234"/>
<input type="hidden" name="cyq" value="http://www.mamicode.com/我爱你"/>
<textarea name="wxx">请问都去玩弄我年轻哦等会我打时间快点哈杀佛气温哦我掐死等你撒地好大啊分开就放不开家常便饭哈大的丢啊打死都
不发阿姐</textarea>
<input type="button" name="jy" value="http://www.mamicode.com/蛮王"/>
<input type="submit" name="jy1" value="http://www.mamicode.com/赵信"/>
<input type="reset" name="jy3" value="http://www.mamicode.com/剑豪"/>
<input type="image" src="http://www.mamicode.com/图片/0.jpg" value="http://www.mamicode.com/tupian”/>
<input type="radio" name="d单选" value="http://www.mamicode.com/男">男
<input type="radio" name="d单选" value="http://www.mamicode.com/女">女
<input type="checkbox" name="武器" value="http://www.mamicode.com/tm">tm
<input type="checkbox" name="武器" value="http://www.mamicode.com/zx">zx
<input type="checkbox" name="武器" value="http://www.mamicode.com/aike">aike
</form>
<select>
<option value="http://www.mamicode.com/001"> 汉族</option>
<option value="http://www.mamicode.com/222">回族</option>
<option value="http://www.mamicode.com/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="http://www.mamicode.com/内容"
<input type="text" name="名字" value="http://www.mamicode.com/要显示的内容">
2.密码框是在输入密码的时候使用,会把用户输入的内容变成特殊的字符,和文本框一样都要起个名字和我们我输入的内容,用
name="migzhi",value="http://www.mamicode.com/密码框",在制作密码框的时候需要把type="password"
<input type="password" name="migzhi" vaiue="密码框">
3.隐藏域是不再浏览器中显示的会隐藏在后台运行,做隐藏域的时候就要使type="hidden" 也要起个名字,在value输入要隐藏的内容;可以用
在不想让用户,但又想提交的时候。
<input name="yincangyv"value="http://www.mamicode.com/隐藏域">
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="http://www.mamicode.com/图片的位置"在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="http://www.mamicode.com/加入的网页位置" width="网页宽度的大小" heihht="网页高度的大小" ></ifarme>
frameboder如果等于0就能把滚边框去掉,scrodling="no"是把滚动条去掉
2.frameboder可以使网页进行拆分,cols是把网页左右拆分cols="第一个网页的像素比例,*代表剩下的所有的像素比例"
<frame src="http://www.mamicode.com/加入的页面位置">
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="http://www.mamicode.com/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的的标签
表单的元素和样式表