您的位置：首页 > Web前端 > HTML

HTML表单应用练习

2016-05-13 22:19 495 查看
 

表单应用
效果图



 

 

1、表单的属性

<form name="frm" action="./login_page.html" method="POST" target="_blank" enctype="multipart/form-data" >

action=...指跳转到哪里

method=”GET” OR “POST”指表单提交数据的方式 有GET和POST两种

2、文本域、密码域、单选框、多选框、下拉框、提交、复位

 

文本框<input type="text" name="text" maxlength="10">

Maxlength指能输入最大字符位数

 

密码域 <input type="password" name="pwd">

 

复选框 <input type="checkbox" name="enjoy[]" value="2" checked>

Checked表示默认选择什么选项

单选框  <input type="radio" name="sex" value="1" checked>

Checked表示默认选择什么选项

 

上传图片 <input type="file" name="uploadFile">

 

文本域

<textarea cols=40 rows=6>在这里输入你的信息</textarea>

Cols表示文本域的宽位40行

Rows表示文本域的高度为6列

 

下拉列表

                   <select >

<option value="0">---请选择-</option>

...

<option value="5" selected>55555555</option>

<option value="6">66666666</option>

</select>

Selected表示默认显示的选项

 

多选列表

    <select size=5>

<option value="1">111111</option>

<option value="2">2222222</option>

<option value="3">333333</option>

<option value="4">4444444</option>

<option value="5">55555555</option>

<option value="6">66666666</option>

</select>

Select size=5表示显示5项目列表出来,其他的选项隐藏.

 

提交数据的样式 

 按钮              <input type="submit" value="提交">

 图片链接 <input type="image" src="login.jpg">

 重置 <input type="reset">

 按钮 <input type="button" value="清空" 

 



 

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>表单的应用</title>

</head>

<body background="flower.jpg">

<center><caption>表单的应用</caption><center>

<form name="frm" action="./login_page.html" method="POST" target="_blank" enctype="multipart/form-data" >

<table border="1" width="500" align="center">

<tr>

<th>文本域(<u>u</u>)</th>

<td><input type="text" name="text" maxlength="10"></td>

</tr>

<tr>

<th>密码域</th>

<td><input type="password" name="pwd"></td>

</tr>

<tr>

<th>复选框</th>

<td>玩游戏<input type="checkbox" name="enjoy[]" value="1">

看电影<input type="checkbox" name="enjoy[]" value="2" checked>

旅游<input type="checkbox" name="enjoy[]" value="3">

看书<input type="checkbox" name="enjoy[]" value="4" checked>

写字<input type="checkbox" name="enjoy[]" value="5">

</td>

</tr>

<tr>

<th>单选框1</th>

<td>男<input type="radio" name="sex" value="1" checked>

女<input type="radio" name="sex" value="0">

保密<input type="radio" name="sex" value="2">

</td>

</tr>

<tr>

<th>单选框2</th>

<td>男<input type="radio" name="sex1" value="1">

女<input type="radio" name="sex1" value="0" checked>

保密<input type="radio" name="sex1" value="2">

</td>

</tr>

<tr>

<th>上传文件</th>

<td><input type="file" name="uploadFile"></td>

</tr>

<tr>

<th>下拉列表(<u>s</u>)</th>

<td>

<select >

<option value="0">---请选择-</option>

<option value="1">111111</option>

<option value="2">2222222</option>

<option value="3">333333</option>

<option value="4">4444444</option>

<option value="5" selected>55555555</option>

<option value="6">66666666</option>

</select>

</td>

</tr>

<tr>

<th>列表</th>

<td><select size=5>

<option value="1">111111</option>

<option value="2">2222222</option>

<option value="3">333333</option>

<option value="4">4444444</option>

<option value="5">55555555</option>

<option value="6">66666666</option>

</select>

</td>

</tr>

<tr>

<th>多选列表</th>

<td><select size=5>

<option value="1">111111</option>

<option value="2">2222222</option>

<option value="3">333333</option>

<option value="4">4444444</option>

<option value="5">55555555</option>

<option value="6">66666666</option>

</select>

</td>

</tr>

<tr>

<th>多行文本域</th>

<td><textarea cols=40 rows=6>在这里输入你的信息</textarea></td>

</tr>

<tr>

<td colspan=2 align="center">

<input type="submit" value="提交">

<input type="image" src="login.jpg">

<input type="reset">

<input type="button" value="清空" onclick="document.frm.username.value=""">

</td>

</tr>

</form>

</table>

</body>

</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航