【HTML】表单的基本结构和属性

基本架构

表单三部分: 表单标签、表单域、按钮；

表单标签 ：
action:提交到后端的地址，不写是提交到本页面
 method:
          get：参数会自动拼接到url地址的后边  ?userName="李四"&pwd="123456"
         post：不会拼接在地址栏中，更加安全

<form action="" method="get">
<-- 表单域 -->
用户名:<input type="text"  name="userName" value="李四"/><br>
密&emsp;码:<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="上传">