基础：HBuilder X表单标签及用法

<!--表单标签 form-->

<!--属性

method:表示表单数据提交的方法

get:默认，发送数据，url地址会发生变化,安全性低，数据量小，速度快，

post:接收数据，url地址不会发生变化,安全性高，数据量大，速度慢，

action:表单处理程序的地址

enctype:表单数据的编码方式

application/x-www-form-urlencoded：默认，对所有表单数据进行编码

multipart/form-data：对数据不编码（有文件上传时，必须使用该值）

text/plain：把空格表示成+（一般不用），不对特殊字符编码

target:目标窗口中显示(跟超链接相同)

-->

<form action="success.html" name="mtForm" method="get"

enctype="multipart/form-data" target="_blank">

用户名: <!--文本框 text:表示哪种类型的文本框--><input type="text" name="userName" value=""

placeholder="请输入用户名" maxlength="20" size="16">

密码:<input type="password" name="Passwode" value="" placeholder="请输入用户名" maxlength="16">

<input type="button" value="普通按钮"/> <!--普通按钮.功能需要定义-->

<input type="submit" value="提交按钮"/><!--提交按钮的作用:提交整个表格-->

<input type="reset" value="重置按钮"><!--重置按钮：重置整个表单的数据-->

</form>

<hr color="#f00">

<form action="#" method="post" name="loginform">

<table>

<tr>

<td>昵称</td>

<td><input type="text" name="uname" placeholder="请输入昵称"></td>

</tr>

<tr colospan="2">

<input type="submit" value="提交按钮"/><!--提交按钮的作用:提交整个表格-->

<input type="reset" value="重置按钮"><!--重置按钮：重置整个表单的数据-->

</tr>

</table>

</form>

<hr color="#f00">

<form action="#" method="get" enctype="application/x-www-form-urlencoded" name="myform">

账号:<input type="text" name="username" />

密码:<input type="password" name="psw"/>

<!--单选框name相同的成为一组;check:默认选中--><br/>

性别:<input type="radio" name="userSex" value="男" check />男

<input type="radio" name="userSex" value="女"/>女

<!--多选框 name一般相同的为一组 check:是否选中--><br/>

爱好: <input type="checkbox" name="userHobby" value="抖音" />抖音

<input type="checkbox" name="userHobby" value="快手" />快手

<input type="checkbox" name="userHobby" value="睡觉" />睡觉

<!--图像域 功能与提交按钮一致 src:图片路径 --><br/>

<input type="image" src="img/注册.png" width="100">

<!--隐藏域 用户不可见--><br/>

<input type="hidden" name="mydate" value="今年18岁">

<br>

上传头像:<!--文件域 用于上传文件表单中有上传文件时表单必须使用编码-->

<input type="file" name="myfile" value="">

<input type="button" value="确定上传">

<!--菜单类 select--><br/>

学历：<select name="XL" >

<option value="0">请选择学历</option>

<option value="小学">小学</option>

<option value="中学">中学</option>

<option value="高中">高中</option>

</select>

<br>

爱好:<!--multiple(多选) size(显示几个可选按钮) selected(默认选中)-->

<select name="XL" id="" multiple size="6">

<option value="1" selected="selected">篮球</option>

<option value="2">足球</option>

<option value="3">橄榄球</option>

<option value="1">篮球2</option>

<option value="2">足球2</option>

<option value="3">橄榄球2</option>

</select>

<br>

<hr color="#f00">

<!--带分组效果的菜单-->

爱好:<!--multiple(多选) size(显示几个可选按钮)-->

<select name="XL" id="" multiple size="8">

<optgroup label="运动类">

<option value="1">篮球</option>

<option value="2">足球</option>

<option value="3">橄榄球</option>

</optgroup>

<optgrouplabel="运动类2">

<option value="1">篮球2</option>

<option value="2">足球2</option>

<option value="3">橄榄球2</option>

</optgroup>

</select>

<br> <!--文本域 多行文本框 vols(一行可容纳多少个字) rows(多少行内不会出现滚动条)-->

<!--结尾与开头同一行placeholder-->

个人简介: <textarea name="JianJie" id="" cols="30" rows="10"

placeholder="简介"></textarea>

<br>

<h1>其他标签</h1><!--label:类似与焦点效果 for与id一致 id(不可重复)-->

<label for="userName">用户名: </label>

<input type="text" name="username" id="userName"/>

<br>

<!--filedset标签：对表单元素进行分组。类似于C# groundbox-->

<fieldset id="">

<legend>基本信息</legend><!--分组框内标题-->

<label for="usernname">用户名: </label>

<input type="text" name="username" id="usernname"/>

</fieldset>

<br>

<!--datalist标签:给input元素定义选项列表。input元素通过list属性与datalist的ID对应。-->

<fieldset id="Group2">

<legend>个人详细信息</legend>

<label for="books">正在学习的课程：</label>

<input type="text" id="books" name="books" list="mybooks">

<!--给文本框定义数据列表-->

<datalist id="mybooks">

<option value="C#"></option>

<option value="java"></option>

</datalist>

</fieldset>

<hr color="#f00" size="5">

<!--按钮 提交 重置 disabled:禁用--><br />

<input type="submit" name="login" value="登录"/>

<input type="reset" name="rst" value="重置" disabled="disabled">

</form>