HTML界面应用标签

来源：互联网发布：西南大学远程网络培训编辑：程序博客网时间：2024/05/29 05:03

HTML编辑界面几种应用标签

5..1单选按钮

单选按钮选择一组互相排斥的值，部分代码如下：

<form method="post" action=" ">性别:<input name="gen" type="radio"class="input" value="男">男 <input name="gen" type="radio"class="input" value="女">女 </form>

如果性别默认值选为女，则在代码中添加 checked="checked"

5.2复选框

(1)name 定义控件名称

(2)value 定义控件的值

(3)checked 设定控件初始状态是被选中的

用户可以选择某个复选框也可以取消复选

代码如下

<p>爱好:<input type="checkbox" name="interest" value="listen">听音乐<input type="checkbox" name="interest" value="sport">运动<input type="checkbox" name="interest" value="travel">旅游</p>

radio用于单选，有以下属性

当为单选项时，所有按钮name属性必需相同。如：都设置为abc

<body><center><p align="center"><form><p>你的休闲爱好是什么：</p><INPUT CHECKED name=R1 type=radio value="music">音乐<br><INPUT name=R1 type=radio value="qym">体育<br> <INPUT name=R1 type=radio value="tour">旅游<br></form></p></center></body>

5.3下拉列表框

下列表框主要是为了用户快速，方便正确选择一些选项，并且节省页面空间，
它是通过<select>标签和<option>标签实现的
<select name="指定列表的名字"size="行数">
<option value="可选择的值"selected="selected">.......</option>
</select>
部分代码如下

<p>出生日期:<input name="byear" value="1993"size="4" maxlength">&nasp;年<select name="bmon"><option value="">[选择月份]</option><option value="1">一月</option><option value="2">二月</option><option value="3">三月</option><option value="4">四月</option><option value="5">五月</option><option value="6">六月</option><option value="7">七月</option><option value="8">八月</option><option value="9">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option></select>月&nasp;<input name="bday" value="4" size="2" maxlength="2">日</p>

如果让月份默认为3月，<option value="3" selected="selected">三月</option>

5.4按钮

按钮在表单中经常用到，html5中按钮分为三种，reset, submit,button（普通按钮）
普通按钮，主要是用来响应onclick事件，需要与事件关联使用onclick="alert(this.value)"
onclick事件是表单元被单击时所激发的事件你，并只限于按钮。在事件中可以调用相应的的脚本代码，执行一些特定的客户端程序
，有时候，为了美观，在实际的开发过程中，会使用图片按钮代替。
提交按钮，表单将会提交到action 属性所指定的URL

<form><input type="text" name="username" value="请输入用户名"><br><input type="password" name="password" value="请输入密码"><br><input type="SUBMIT" value="确认"><input type="button" value="取消"><input type="RESET" value="重置"></form>

使用图像来代替Submit按钮

<form><input type="text" name="username" value="请输入用户名"><br><input type="password" name="password" value="请输入密码"><br><input type="IMAGE" src="huahua.gif"><input type="IMAGE" src="hre.jpg"></form>

5.6多行文本

当需要在网页中输入两行以上的的文本时，怎么办？

<H4>自我评价</H4><P><textarea name="textarea" cols="40" row="10">     冷静执着，坚强自信，热心乐观向上......     </textarea>

5.7文件域

文件域用于实现文件的选择，在应用只需要把type属性设置file即可。
在使用文件域时，需要特别注重的是包含文件域的表单，由于提交的表单数据包括普通的表单数据，
文件数据等部分内容，因此必须设置表单的"entype"编码的属性为"multipart/form-data",表示将表格分为多部分提交

</textarea> <form action="" method="post" entype="multipart/form-data"> <p><input type="file" name="file"/></br> <input type="submit" name="upload" value="上传"/></p>

阅读全文

0 1