表单元素的使用
一. 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/>
密 码:<input type="password" name="pwd"/><br/>
<input type="submit" value="登录"/><br/>
<input type="reset" value="重新填写"/>
</form>
</body>
</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/>
密 码:<input type="password" name="pwd"/><br/>
<input type="submit" value="登录"/>
<input type="reset" value="重新填写"/>
</form>
</body>
</html>
结果:
注意:
1.在这个例子里,综合的用了多种的表单元素类型;
2.在单选框里面,多个选项一次只能选择一个选项,通过将多个选项的名字name=“”属性保持一致,这就使各选项可区分了。
3.hidden类型的作用是:提交相应的内容,但是在本页上隐藏;
4.某些可以输入文本的控件可以通过在键值对之间写入提示信息;也可以设置value=“提示信息”的属性。
5.选择上传文件的方法:
<input type=”file” name=”myfile”>请选择要上传的文件….</input>
6.下拉列表:
<select>
<option>--提示--</option>
<option value=“。。”>选项一</option>
。。。。
</select>