HTML表单入门基础

网页镶嵌:

<iframe src="http://www.cnblogs.com/tfl-511/" width="200" height="300" frameborder="0”


 

表单的输入是被<form></form>包裹:

例如

<form>
<table width="800" align="center" cellpadding="0" cellspacing="0" border="0">
<tr align="left" height="50">
<td>注册账号</td>
</tr>
<tr height="2" bgcolor="#000000">
<td width="100%" colspan="3"></td>
</tr>
<tr height="50">
<td align="right" width="20%">昵称</td>
<td width="60%"><input type="text" placeholder="请输入昵称" required="required" style="width:90%;"/></td>
<td><i>昵称不能为空</i></td>
</tr>

</table>

</form>


一、文本输入

文本框:<input type="text" placeholder="输入文字" value=“默认值” style=“width:100%,"/>

密码框:<input type="password" placeholder="显示提示在文本框内" value=“默认值” style=“width:100%, height:50,"/>

文本框:<textarea cols="每行字符的多少” rows="几行高"></textarea>

隐藏域:<input type="hidden"/>


二、按钮

递交按钮:<input type="submit" value="按钮里面显示的文字" disabled="disabled"(是按钮不可使用)required=“required”(内容必须填写)/>  将所有文件上传,并且刷新网页

重置按钮:<input type="reset" disabled="disabled"(是按钮不可使用)required=“required”(内容必须填写)/> 将form表单重新恢复默认

普通按钮:<input type="buttton" value="登录" disabled="disabled"(是按钮不可使用)/>  没有刷新功能

图片按钮:<input type="image" src="图片地址"/> 

 


 

三、选择输入

单选择按钮:<input type="radio" name="进行分组,一般为男女" checked="checked"(默认被选中)

复选按钮:<input type="checkbox" checked="checked"(默认被选中,不能取消)

文件上传:<input type="file"/>

下拉列表:<select size="1"(一列单选)></select>

              <select multiple="multiple" size="2"(一列多选)></select>

                      <option value="例条形码1">商品1</option>  

                      <option value="例条形码2">商品2</option> 

                      <option value="例条形码3">商品3</option> 


 

 例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ注册页面</title>
</head>

<body topmargin="100" background="fd1.jpg">
<form>
<table width="800" align="center" cellpadding="0" cellspacing="0" border="0">
<tr align="left" height="50">
<td>注册账号</td>
</tr>
<tr height="2" bgcolor="#000000">
<td width="100%" colspan="3"></td>
</tr>
<tr height="50">
<td align="right" width="20%">昵称</td>
<td width="60%"><input type="text" placeholder="请输入昵称" required="required" style="width:90%;"/></td>
<td><i>昵称不能为空</i></td>
</tr>
<tr height="50">
<td width="20%" align="right">密码</td>
<td width="60%"><input type="password" required="required" style="width:90%;" placeholder="请输入密码" /></td>
<td><i>密码不能为空</i></td>
</tr>
<tr height="50">
<td align="right" width="20%">确认密码</td>
<td width="60%"><input type="password" required="required" placeholder="请确认密码" style="width:90%;" /></td>
<td><i>请再次输入密码</td>
</tr>
<tr height="50">
<td width="20%" align="right">性别</td>
<td width="60%"><input type="radio" name="sex" />男&nbsp;
<input type="radio" name="sex" />女</td>
</tr>
<tr height="50">
<td align="right" width="20%">生日</td>
<td width="60%"><select size="1"><option>1992</option><option>1993</option><option>1994</option></select>&nbsp;<select size="1"><option>2月</option><option>3月</option><option>4月</option></select>&nbsp;<select size="1"><option>2号</option><option>3号</option><option>4号</option></select></td>
</tr>
<tr height="50">
<td width="20%" align="right">所在地</td>
<td width="60%"><select size="1"><option>山东</option><option>吉林</option></select>&nbsp;<select size="1"><option>淄博</option><option>济南</option></select></td>
</tr>
<tr height="50">
<td width="20%" align="right">电话</td>
<td width="60%"><input type="text" placeholder="请输入电话号码" style="width:90%;" /></td>
</tr>
<tr height="50">
<td width="20%"></td>
<td width="60%"><font size="2" color="#666666">可通过该手机号码快速寻找密码<br />
中国大陆以外手机号码<a href="http://www.cnblogs.com/tfl-511/">点击这里</a></font></td>
</tr>
<tr height="50">
<td></td>
<td><input type="submit" value="注册" style="width:90%; height:50px;"/></td>
</tr>
<tr height="50">
<td></td>
<td><input type="checkbox" /><font size="2">同时开通QQ空间</font></td>
</tr>
<tr height="50">
<td></td>
<td><input type="checkbox" /><font size="2">我已阅读并同意相关服务条款和隐私政策</font></td>
</tr>
</table>
</form>
</body>
</html>

 

posted @ 2016-08-18 17:53  熊猫卡洛斯  阅读(263)  评论(0编辑  收藏  举报