博客介绍了前端表单相关知识，表单本身不可见，文本字段默认宽度20字符。还阐述了前端和后端的通信方式，包括form提交和Ajax提交。同时介绍了表单核心标签、form属性，以及通过修改input标签type改变展现形式，并给出了完整的表单代码示例。
表单（表单本身并不可见，特别注意文本字段的默认宽度是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>
扫一扫
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
