表单元素的使用

一.    html常用的标记0元素—form

1.     表单元素作用:主要是让用户输入数据,并提交给服务器。

2.     基本语法:

1<form action=”url” method=”提交的方法(get/post> //默认get

<input  type=”text..”>

//输入类型是由类型属性(type)定义的。中间是各种元素{下拉列表,输入框,按钮…..}

</input>

<form/>

实例1

Login.html

<html>

<head>

<title>login on</title>

</head>

<body>

<h1>登陆界面</h1>

<form action="???" method="get">

用户名:<input type="text" name=username/><br/>

&nbsp;&nbsp;:<input type="password" name="pwd"/><br/>

<input type="submit" value="登录"/><br/>

<input type="reset" value="重新填写"/>

</form>

</body>

</html>

结果

html学习笔记2_html 表单 

2.type决定表单现实的内容:

<input type=””/>类型有=radio(单选按钮),checkbox(复选按钮),text(文本输入),textarea(文本域),p_w_picpath(图片)button(添加按钮),file(选择文件)password(密码),submit(提交),reset(重新填写),下拉列表。。。

综合实例:

<html>

<head>

<title>login on</title>

</head>

<body>

 

<h1>个人×××管理</h1>

<form action="???" method="get">

姓名:<input type="text" name=username value="请输入"/><br/>

年龄:<input type="age" name=age/><br/>

性别:<br/>

       <input type="radio" name="sex" value="fmale"/>

       <input type="radio" name="sex" value="male"/><br/>

专业:<br/>

         软件工程<input type="checkbox" name="c1"/><br/>

         计算机<input type="checkbox" name="c1"/><br/>

婚姻状况:

<select name="status">

<option value="">--按选择--</option>

<option value="s0">单身</option>

<option value="s1">未婚</option>

<option value="s2">已婚</option>

</select>

<input type="p_w_picpath" src="11.jpg" name="cio"/><br/>

自我评价:<br/>

<textarea cols="40" rows="10">亲,写下对自己的评价吧....</textarea><br/>

<input type="file"name="myfile"/>请选择文件..<br/>

&nbsp;&nbsp;:<input type="password" name="pwd"/><br/>

<input type="submit" value="登录"/>

<input type="reset" value="重新填写"/>

</form>

</body>

</html>

结果:

 

html学习笔记2_html 表单_02

 

 


注意:

1.在这个例子里,综合的用了多种的表单元素类型;

2.在单选框里面,多个选项一次只能选择一个选项,通过将多个选项的名字name=“”属性保持一致,这就使各选项可区分了。

3.hidden类型的作用是:提交相应的内容,但是在本页上隐藏;

4.某些可以输入文本的控件可以通过在键值对之间写入提示信息;也可以设置value=“提示信息”的属性。

5.选择上传文件的方法:

     <input type=”file”  name=”myfile”>请选择要上传的文件….</input>

     6.下拉列表:

      <select>

<option>--提示--</option>

<option value=“。。”>选项一</option>     

。。。。

</select>

                                                                                                                                                  2013/1/18