HTML基础-(表单)

表单(表单本身并不可见,特别注意文本字段的默认宽度是20个字符)

前段和后端之间的通信包括两种方式:1、form提交方式。2、Ajax提交方式。

表单核心标签:只有提交功能,没有任何样式。

form属性:

1、action属性:提交的地址,通常为服务端的地址。

2、method:提交方式,get和post两种常用方式。默认为get方式。

input是表单的核心标签,通过修改input标签中的type类型来改变展现形式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
前端和后端之间的通信
1.form提交方式
2.ajax提交方式
-->
<!--核心标签:只有提交的功能,没有任何的样式-->
<!--form
属性:
action 提交的地址,通常为服务端的地址,如果不写,默认往本页提交
method 提交的方式。get/post 如果不写,为get提交
get和post的区别。
-->
<form action="" method="">
<!--
input、button是一个行内块标签
input是表单的核心标签,通过修改input标签中的type属性来改变展现的样式-->
用户名:<input type="text" name="username"/><br />
密码名:<input type="password" name="userpwd"/><br />

性别:男<input type="radio" name="sex" value="1" checked/> 女<input type="radio" name="sex" value="0" />
<br />
<!--一组必须含有相同的name属性值-->
兴趣爱好:
<!--多选框,type="chechbox"-->
<input type="checkbox" checked="checked" name="aihao" value="0"/>打酱油
<input type="checkbox" checked name="aihao" value="1"/>打架
<input type="checkbox" name="aihao" value="2"/>泡妞
<input type="checkbox" name="aihao" value="3"/>打游戏
<input type="checkbox" name="aihao" value="4"/>学习
<br />
来自何方:
<!--下拉框,
<select name="">
<option value=""></option>
</select>-->
<select name="hefang" id="">
<option value="武汉">武汉</option>
<option value="荆州">荆州</option>
<option value="黄石">黄石</option>
<option value="襄阳">襄阳</option>
<option value="十堰">十堰</option>
</select>
<br />
自我描述:
<!--多行文本框
<textarea name="" rows="" cols=""></textarea>-->
<textarea name="miaoshu" rows="" cols=""></textarea>
<br />
<!--提交方式:
1、<button>提交</button>
2、<input type="submit" value="提交"/>
-->
<button>提交1</button>
<input type="submit" value="提交"/>
<!--<input type="image" src="koala.jpg" /> 图片提交方式-->
<!-- ?后面的内容表示参数。我们最终的目的是要把必须的参数给发送到后端
想要发送参数,input中必须含有name属性

-->
</form>

</body>
</html>

猜你喜欢

转载自www.cnblogs.com/ddrr123/p/10937461.html