zoukankan      html  css  js  c++  java
  • HTML高级标签(3)————表单的应用


    在HTML开发中,标签的种类和数量非常多,不可能说每一种都研究透。非常多能够用CSS来控制的标签,我们基本没有必要在上面浪费时间。所以,我们仅仅要掌握在HTML开发中比較经常使用的标签就全然能够了。

    首先,先写一个最简单的登录表单。

    <html>
    	<head>
    		<title>表单的应用</title>
    	</head>
    
    	<body>
    		<table border="1" width="500" align="center">
    		<form name="frm" action="login.php">
    			<caption>表单的应用</caption>
    
    			<tr>
    					<th>文本域(<u>U</u>)</th>
    					<td>
    							<input type="text" name="username" value="username">
    					</td>
    			</tr>
    			<tr>
    					<th>密码域</th>
    					<td>
    							<input type="password" name="password" value="password">
    					</td>
    			</tr>
    
    <span style="white-space:pre">			</span><tr>
    <span style="white-space:pre">					</span><td colspan="2" align="center">
    <span style="white-space:pre">							</span><input type="submit" name="sub">
    <span style="white-space:pre">							</span><input type="reset">
    <span style="white-space:pre">							</span><input type="image" src="ucai.png"><span style="white-space:pre">	</span><!--这是加入相对路径的一张照片-->
    <span style="white-space:pre">					</span></td>
    <span style="white-space:pre">			</span></tr>
    <span style="white-space:pre">		</span></form>
    <span style="white-space:pre">		</span></table>
    <span style="white-space:pre">	</span></body>
    </html>
    这是程序执行后的结果:(图片仅仅是我任意截取的一个logo,绝不是打广告)


    一个简单的表单就完毕了,注意<form>标签应该放在<table>里面,加入其它字段元素时,也应该遵循这个方式。


    接下来,再加入一个单选框和复选框。

    			<tr>
    					<th>复选框</th>
    					<td>
    							game<input type="checkbox">
    							movie<input type="checkbox">
    							travel<input type="checkbox">
    							reading<input type="checkbox">
    							writing<input type="checkbox">
    					</td>
    			</tr>
    			<tr>
    					<th>单选框</th>
    					<td>
    							<input type="radio" name="sex" checked>boy
    							<input type="radio" name="sex">girl
    							<input type="radio" name="sex">secret
    					</td>
    			</tr>
    
    复选框的type="checkbox",单选框的type="radio".

    然而,复选框可一所有选择,也能够都不选择。单选框则必须有一个选择的,所以要加上一个默认项,也就在后面加入一个checked。还有,单选框中的选项都是以相互排斥的方式存在的,所有将他们相当于放在一个数组中一样,也就是命名都一样的话,就能够保证他们的相互排斥性。要不然,就一个都选不了。

    这是执行后的结果:



    表单中少不了的肯定有列表,以下再介绍几种经常使用的列表:普通列表,下拉列表,多选列表。

    					<th>下拉列表</th>
    					<td>
    							<select name="list">
    									<option>--请选择--</option>
    									<option>111111</option>
    									<option selected>222222</option><span style="white-space:pre">	</span><!--默认选项-->
    									<option>333333</option>
    									<option>444444</option>
    									<option>555555</option>
    									<option>666666</option>
    									<option>777777</option>
    									<option>888888</option>
    							</select>
    					</td>
    			</tr>
    			<tr>
    					<th>普通列表</th>
    					<td>
    							<select name="list1" size="4"><span style="white-space:pre">		</span><!--下拉长度为4-->
    									<option>--请选择--</option>
    									<option>111111</option>
    									<option>222222</option>
    									<option>333333</option>
    									<option>444444</option>
    									<option>555555</option>
    									<option>666666</option>
    									<option>777777</option>
    									<option>888888</option>
    							</select>
    					</td>
    			</tr>
    			<tr>
    					<th>多选列表</th>
    					<td>
    							<select name="list2" multiple><span style="white-space:pre">		</span><!--multiple表示为多选列表-->
    									<option>--请选择--</option>
    									<option>111111</option>
    									<option>222222</option>
    									<option>333333</option>
    									<option>444444</option>
    									<option>555555</option>
    									<option>666666</option>
    									<option>777777</option>
    									<option>888888</option>
    							</select>
    					</td>
    			</tr>
    


    标签的内外关系不要搞混了。

    执行结果:

    最后,再写一个多行文本域。在非常多须要描写叙述的地方,多行文本域就派上用场了。

    			<tr>
    					<th>多行文本域</th>
    					<td>
    							<textarea cols="20" rows="10" name="message">typing your message here</textarea>
    					</td>
    			</tr>
    
    就是非常easy,一个<testarea></textarea>搞定了。cols和rows属性就不多讲了。

    看看执行后的样子:

    字数超过文本框大小时,会自己主动加入滚动栏。

    好了,经常使用的也就是这些了,大家共同学习进步。


  • 相关阅读:
    [结题报告]10235 Simply Emirp Time limit: 3.000 seconds
    [杭电ACM]1720A+B Coming
    [结题报告]10041 Vito's Family Time limit: 3.000 seconds
    mysqlvarchar、text 类型到底能存储多大字符?
    mysql项目更换数据源为oralce后项目调整
    Oracle创建定时任务执行函数
    IOS手机访问网页window.location.href跳转新页面第一次可以第二次报错失效
    logrotate日志分割
    查找一批设备的在线情况
    pkill 用法例子
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4202867.html
Copyright © 2011-2022 走看看