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

html学习笔记之form表单

2016-09-08 11:19 676 查看 
<html>
<head>
<title>表单</title>
</head>
<body>

<!--form表单：用于向服务器传输数据。表单一般都括在<form>标签中。
form中的属性：action：表示提交的目标服务器。
method：表示提交的方法（get：默认，以url提交，就是以地址栏方式提交，
提交之后会在地址栏中清晰的显示出来。 post：以报文方式提交）。-->

<form action="http://www.baidu.com" method="get">

<!-- input标签：表单里的元素标签，用于搜集用户信息，根据不同的type属性，输入字段可以有多种类型。
input标签中的属性：name：表单元素的名称。
type：表单的类型：
（text：文本框。password：密码框。
submit：提交按钮。reset：重置按钮。button：按钮。image：图像框。
checkbox：复选框。radio：单选框。file：文本选择框。）。
value：控件的初始值。size：控件的宽度。maxlength：控件中输入的最大字符个数。checked：控件是否被选中。 -->

<!-- 文本框，如果没有name属性，提交之后不会在地址栏显示文本框中的内容。-->
用户名：<input name="txtName" type="text"/><br/>

<!-- 密码框，任何字符都以“*”显示。也是必须要有name属性。 -->
密  码：<input name="txtPwd" type="password"/><br/>

<!-- 提交按钮，如果没有value属性，按钮默认名是“提交查询内容”。  -->
<input type="submit" value="提交到百度"/><br/>

<!-- 重置按钮，如果没有value属性，按钮默认名是“重置”。 -->
<input type="reset" value="清空"/><br/>

<input type="button" value="按钮"/><br/>

<!-- 图片标签，用于显示图片 -->
<input type="image" value="图像" src="10.jpg"/><br/>
</form>

<hr/>

<form>
<!-- fieldset标签：分组标签，可将表单内的相关元素分组。-->
<fieldset>
<legend>性别</legend> 	<!-- legend元素：为分组的标题。-->
男<input name="gender" type="radio"/><br/>
女<input name="gender" type="radio"/><br/>
</fieldset>

<hr/>

<fieldset>
<legend>婚姻状况</legend>
已婚<input name="married" type="radio"/><br/>
未婚<input name="married" type="radio"/><br/>
</fieldset>

<hr/>

<fieldset>
<legend>科目</legend>
语文<input name="china" type="checkbox"/><br/> <!-- 多选 -->
数学<input name="math" type="checkbox"/><br/>
英语<input name="english" type="checkbox"/><br/>
</fieldset>

<hr/>

<!-- select：列表标签。属性：size：1或非1（1：显示下拉列表。非1：所有选项都在一个显示框中显示，
数字就是显示的行数。 ）-->
<select size="5">
<!-- optgroup标签：用于组合选项，将相关元素进行组合。label属性：组合选项的标题。 -->
<optgroup label="江苏省">
<option>南京市</option>		<!-- 组合选项中的项 -->
<option>苏州市</option>
<option>无锡市</option>
</optgroup>
<optgroup label="浙江省">
<option>杭州市</option>
<option>温州市</option>
<option>绍兴市</option>
</optgroup>
</select>

<hr/>

请选择文件：<input type="file"/><br/>

<hr/>

<!-- textarea：文本域标签。-->
<textarea cols="30" rows="20">
    过零丁洋
辛苦遭逢起一经，干戈寥落四周星；
山河破碎风飘絮，身世浮沉雨打萍；
惶恐滩头说惶恐，零丁洋里叹零丁；
人生自古谁无死，留取丹心照汗青。
</textarea>
</form>
</body>
</html>
页面效果：
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航