基本架构
表单三部分: 表单标签、表单域、按钮;
表单标签 :
action:提交到后端的地址,不写是提交到本页面
method:
get:参数会自动拼接到url地址的后边 ?userName="李四"&pwd="123456"
post:不会拼接在地址栏中,更加安全
<form action="" method="get">
<-- 表单域 -->
用户名:<input type="text" name="userName" value="李四"/><br>
密 码:<input type="password" name="pwd" value="123456"/><br>
<!-- 表单按钮 -->
<input type="submit" value="注册"/>
</form>
表单的其他属性:
size:input的初始长度,代表字符数
maxlength:input能输入的最大字符数
sytle:所有标签都有style属性,用于专门设置样式
style:属性名:属性值;属性名:属性值
background-color:背景颜色
width:宽度,px
height:高度,px
color:字体颜色
<input type="text" size="5" maxlength="8" style="width:200px;color:red"/>
2、表单域
type:表单框类型,比如text,password,..........
value:用来接收用户在表单框输入的值,可以不写,写上可以设置初始值,如果用户输入会将其覆盖
name:表单框名称,后端会根据name获取对应value
type:表单框类型,比如text,password,..........
radio:单选按钮,两个name值必须一致,后端会根据name获取一个选中的value值 ,checked默认选中
checkbox:复选框,name值必须一致,后端会根据name获取多个选中的value值,checked默认选中
value:用来接收用户在表单框输入的值,可以不写,写上可以设置初始值,如果用户输入会将其覆盖
name:表单框名称,后端会根据name获取对应value
select:下拉框
multiple:下拉框多选
option:是下拉框的每一项,selected默认选中
文本框:<input type="text" name="userName" value="张三" /><br>
密码框:<input type="password" name="pwd" value="123" /><br>
单选按钮:
<input type="radio" name="gender" value="male" checked/>男
<input type="radio" name="gender" value="female" />女<br>
复选框:
<input type="checkbox" name="hobby" value="play" />打球
<input type="checkbox" name="hobby" value="shopping" checked/>逛街
<input type="checkbox" name="hobby" value="movie" />看电影<br>
下拉框:
<select name="city">
<option value="001">郑州</option>
<option value="002" selected>开封</option>
<option value="003">洛阳</option>
</select><br>
下拉框多选:
<select name="city" multiple>
<option value="001">郑州</option>
<option value="002" selected>开封</option>
<option value="003" selected>洛阳</option>
</select>
按钮类型:
submit和image:作用一样,都是将表单数据提交给后端;
reset:重置到网页的初始状态
button:普通按钮,必须配合事件使用,没有提交表单数据的功能
<input type="submit" value="注册"/><br>
<input type="image" src="img/submit.jpg"><br>
<input type="reset" value="重置"><br>
<input type="button" value="提示" onclick="alert('请勿删除!')"><br>
<button onclick="alert('请勿删除!')">
<img src="img/submit.jpg" alt="">
</button>
textarea :多行文本域
cols:每一行的初始字符数
rows:初始行数
<textarea name="content" cols="20" rows="10">默认内容</textarea>
文件上传:
单文件上传:<input type="file" name="file"/><br>
多文件上传:<input type="file" name="files" multiple/><br>
<input type="submit" value="上传">