HTML超文本标记语言3

三、HTML表单标签

1.form标签

<form>
    form标签
    name=表单名称,action=表单提交的地址,method=表单提交方式:get/post
    get/post详解:
        1.get提交数据时:把数据加在地址栏后面,格式:?name=value&name=value post提交数据:封装在主体,格式:username=ls&password=234&sex=male&hobby=sing&city=bj#
        2.get限制大小(浏览器不一样);post不限制
        3.get相对不安全,post相对安全
</form>

2.input标签

name属性必写

<input type="name" />

    type="text":文本输入框 name=“username” value=“老朱”					
    type="password" 密码输入框,以掩码显示
    type="radio" 单选 name=“NA” 值是NA,设置两个一样的值的单选按钮,可以让这两个按钮实现互斥;checked=“checked” 默认选中
    type="file"上传文件
    type="button" 按钮,无内置功能
    type="submit" 有功能:按action设置的地址进行提交
    type="reset" 有功能:重置,清空内容
    type="image" 图片提交按钮,等同submit、src=“图片所在地址”,alt=“提示”,
    type=“hidden” 隐藏表单。在提交数据时服务器需要某个数据,但不向用户显示

3.文本域标签

<textarea 
    name="textarea" 
    列数cols="40" 
    行数rows="20"
></textarea>

实例:

body主要代码:

<!-- 表单标签 -->
<form name="myForm" action="#" method="post">
	<table>
	<tr>
		<td>
		姓名
		</td>
		<td><!-- input -->
			<input type="text" name="name" value="">
		</td>
	</tr>
	
	<tr>
	<td>
		密码
		</td>
		<td>
			<input type="password" name=passworld value="">
		</td>
	</tr>
	
	<tr>
	<td>
		性别
		</td>
		<td>
			<input type="radio" name="Sex" checked="checked" value="male">男
			<input type="radio" name="Sex" value="female">女
		</td>
	</tr>
	
	<tr>
	<td>
		优点
		</td>
		<td>
			<input type="checkbox" name="yd" checked="checked" value="hk">好看
			<input type="checkbox" name="yd" value="sl">善良
			<input type="checkbox" name="yd" value="syht">声音好听
			<input type="checkbox" name="yd" value="tc">腿长
			
		</td>
	</tr>
	
	<tr>
		<td>
		上传文件
		</td>
		<td>
			<input type="file" name="file">
		</td>
	</tr>
	
	<tr>
		<td>
		地址
		</td>
		<td>                                  <!-- select -->
			<select name="city">
				<option >广州</option>
				<option >湛江</option>
			</select>
				
			<select>
				<option>天河</option>
				<option >吴川</option>
			</select>
			
		</td>
	</tr>
	
	<tr>
		<td>
		邮箱
		</td>
		<td>
			<input type="text" name="email" value="">
		</td>
	</tr>
	
	<tr>
		<td>
		备注
		</td>
		<td>
			<textarea name="textarea" cols="40" rows="20"></textarea>
		</td>
	</tr>
	
	
	<tr>
		<td>
			<input type="button" value="button"> 
			<input type="submit" value="submit">
			<input type="reset" value="reset">
		</td>
	</tr>
	
	<tr>
		<td>
			<input type="image" src="../images/zc.png" alt="提示" >
		</td>
	</tr>
	</table>
</form>

图例:

注:未经同意请勿转载,仅作学习使用。以上有描述不正确之处,望大家能不吝指出,共同学习共同进步。谢谢

posted @ 2023-01-09 21:53  MrNF  阅读(27)  评论(0编辑  收藏  举报