HTML表单
表单的是一个允许用户输入信息的元素,用于上传到服务器
form标签
<form action="demo.html" method="GET">
<div class="username">
<input type="text" name="username">
</div>
<div class="password">
<input type="password" name="password">
</div>
<div class="submit">
<input type="submit" velue="提交">
</div>
</form>
所有input都需要用form包裹住,如果不用form标签包裹住页面就无从得知要长传到哪里了;
action属性
这个属性非常重要是用于指定表单的提交地址
method属性
这个属性有get、post两个值,这两个值代表了两种提交方式。
-
get
用这种提交方式会把用户输入的数据拼装成url传输给服务器
什么时候会用到get,我们需要向后索要数据时得先发送请求提示这个时候可以使用get
适合用于短小信息和对安全性要求较低数据 -
post
直接把数据传输给服务器
适合传输较长或需要安全性较高的信息
enctype
- application/x-www-form-urlencoded:在发送钱编码所有字符(默认值)
- tex/planin:空格转换为"+",但不对特殊字符编码
- multipart/form-data:使用包含文件上传控件的表单时必须添加该值
target属性
这个属性是用于设定在何处打开action的,用的很少
input标签
type属性
- text 设定一个可输入的文本框,添加placeholader可以设定一个提示
- password 把输入的字符显示成原点,用于密码输入,添加placeholader可以设定一个提示
- checkbox 设定一个多选框 name得设定成一样的,velue得设置需要长传的值
- rodio 设定一个单选框 velue一样要设定好值,如果是用于一组判断必须把name设定成相同
- file 文件上传,可以使用accept="文件类型"添加上传类型限制
- submit 设定一个提交按钮 这个值的value就是他显示的名称
- hidden 设定一个看不见的隐藏域,可以用于暂存一些东西。还有一个作用就是为了安全性。我们可以用hidden设定一个值用于服务器校验
- button设定一个按钮,但这个按钮并不自带提交属性
- reset 设定一个清空按钮,用于清空其它输入框内的数据
select下拉菜单
<select name="" id="">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
如果我们需要是他默认选中某个选项可以添加selected属性
textarea设定一个可拖动的输入框
<textarea></textarea>
我们可以通过css来调整他的宽高和是否可拖动