form表单标签（⾮常重要，必须掌握）表单标签：form(⾮常重要，必须掌握)
form标签⽤于获取⽤户跟浏览器交互(包含输⼊，选择，上传⽂件等操作)的数据，并将数据打包发给服务端
属性
action：控制数据的提交路径
action=""：默认向当前页⾯所在的地址提交数据
action="全路径"：向当前的绝对路径的地址提交数据
action="/index/"：后缀⽂件，将该后缀跟当前页⾯的地址进⾏拼接，并将数据提交到这个页⾯中
method：控制数据的提交⽅式(也就是请求⾸⾏中的请求⽅式)，默认get
method="get"：提交⽅式为get⽅式
method="post"：提交⽅式为post⽅式
enctype：控制数据提交的编码格式，默认为application/x-www-form-urlencoded
enctype="application/x-www-form-urlencoded"：只能提交数据
enctype="multipart/form-data"：可发送提交⽂件请求
form中的标签
input：⽂本框(百变⾦刚)，可通过type属性设置成不同类型的⽂本框
type="text" 普通⽂本框
<p>
<!--
labal标签，通过for="input标签的id值"
让⽤户在点击⽂本时，直接聚焦到对应的input标签中
-->
<label for="name">⽤户名：
<!--input标签 type="text"：普通⽂本框
value="username"：⽂本框内默认值是username
placeholder="⽤户名⽂本框"：没有填写内容时，⽂本框的作⽤的提⽰信息
-->
<input type="text" id="name" value="username" placeholder="⽤户名⽂本框">
</label>
</p>
type="password" 密⽂⽂本框在该⽂本框输⼊任何⽂本，都会⽤密⽂的形式显⽰
<p>
<label for="pwd">密码：
<!--input标签 type="password"：密⽂⽂本框，即输⼊的内容使⽤密码的形式显⽰-->
<input type="password" id="pwd" placeholder="密码⽂本框">
</label>
input标签placeholder属性
</p>
type="date" ⽇历⽂本框
<p>
<label for="birth">⽣⽇：
<!--input标签 type="date"：⽇历⽂本框-->
<input type="date" id="birth">
</label>
</p>
type="radio" 单选按钮
<p>
<label>性别：
<!--input标签 type="radio"：单选按钮；
name：属性，表⽰标签名称，如果多个按钮的是⼀组单选按钮，那么它们的name属性是⼀致的
checked：属性，表⽰当前按钮被选中，这⾥是⼀个简写⽅式，正规写法是checked="checked"
ps：当属性值和属性名⼀致时，可以直接简写成属性名
-->
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">⼥
</label>
</p>
type="checkbox" 复选按钮
<p>
<label>爱好：
<!--input标签 type="checkbox"：复选按钮
name：属性，表⽰标签名称，如果多个按钮的是⼀组复选按钮，那么它们的name属性是⼀致的
checked：属性，表⽰当前按钮被选中
-->
<input type="checkbox" name="hobby">阅读
<input type="checkbox" name="hobby">K歌
<input type="checkbox" name="hobby">跑步
<input type="checkbox" name="hobby">画画
</label>
</p>
type="file" 上传⽂件按钮
<p>
<label for="open">
<!--input标签 type="file"上传⽂件按钮，
显⽰的⽂本根据不同的浏览器显⽰不同的结果可以跟系统交互，打开本地的⽂件
-->
<input type="file" id="open">
</label>
</p>
type="button" 普通按钮，没有任何功能，后期可⾃定义功能
<!--input标签 type="button"：普通按钮，没有任何功能，后期可⾃定义功能-->
<label for="button">
<input type="button" id="button" value="普通按钮">
</label>
type="submit" 提交按钮，将当前按钮所在form标签中的数据提交到服务端，请求⽅式为POST <!--input标签 type="submit"：提交按钮，将当前按钮所在form标签中的数据提交到服务端，请求⽅式为POST-->
<label for="submit">
<input type="submit" id="submit" value="提交">
</label>
type="reset"：重置按钮，将将当前按钮所在form标签中的数据清空
<!--input标签 type="reset"：重置按钮，将将当前按钮所在form标签中的数据清空-->
<label for="reset">
<input type="reset" id="reset" value="重置">
</label>
button：按钮
<label for="cancel">
<!--button标签普通按钮
跟input标签type="button"功能类似
区别：button会刷新页⾯，input中的button按钮不会
-->
<button id="cancel">取消</button>
</label>
select：下拉框，跟option搭配使⽤
<p>
<label>省份：
<!--select标签：下拉框
multiple：属性，表⽰可以下拉框的选项允许多选
下拉框中的选项通过option标签表⽰
-->
<select id="provences" multiple>
<!--option标签：⽤来定义下拉列表中的可⽤选项-->
<option value="">北京</option>
<option value="">上海</option>
<option value="">⼴州</option>
<option value="">深圳</option>
<option value="">武汉</option>
<option value="">西安</option>
</select>
</label>
</p>
textarea：多⾏⽂本框
<p>
<label for="textarea">个⼈简介：
<!--textarea标签：多⾏⽂本框，可以输⼊多⾏记录
cols：⽂本内可显⽰的⽂本宽度，不建议使⽤这种⽅式
rows：⽂本内可显⽰⽂本的⾏数，超出后，会出现滚动条
-->
<textarea name="" id="textarea" cols="60" rows="10">
</textarea>    </label>
</p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。