HTML基础之表单
使用form标签表示,表单中可以导入(input)很多表单元素,如文本框(单行文字)、密码框、单选框、多选框、按钮、下拉框、文本域(显示多行文字,自动换行)以及上传文件等。
代码解释:
input:表单元素标签
type:选择元素类型,根据需求设置你想要的表单,如文本框、密码框等。
placeholder:占位符也就是提示文字。
注意:
在使用单选框的时候,因为系统本身是无法知道你是要和哪几个选项放在一起供人选择的,所以要加入name属性,来标识他们为一组单选框,这样就可以实现单选功能,如果想想不到效果,也可以先不加然后跑一下看看效果。
checked:用来设置默认勾选状态,多选框也可以使用。
一般表单
<!-- 表单 -->
文本框:<input type="text" placeholder="提示文字">
<br>
<br>
密码框:<input type="password">
<br>
<br>
单选框:<input type="radio">
<br>
<br>
样例:<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
<br>
<br>
多选框:<input type="checkbox">
<br>
<br>
上传文件:<input type="file">
<br>
<br>
上传多个文件:<input type="file" multiple>
<br>
<br>
<textarea ></textarea>
按钮
表单元素可以单独使用,也可以放在表单里一起使用,根据个人习惯以及使用场景可以自行调整,然而在使用按钮元素得时候,一般需要和一些控件捆绑使用,就需要将这些个表单元素捆绑在一个表单里。
如按钮:
<!-- 按钮 -->
<form action="">
<input type="text">
<br>
<br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>
这边有三种按钮,submit是用来提交数据的按钮、reset是用来重置的按钮,如上面在文本框里输入文字后,点击重置按钮就可以清空内容(一定要把文本框和按钮放在一个表单域里form标签),最后一个是最普通也是用的最多的button普通按钮,因为他最普通,所以也是最好用来改装的(CSS+JS)。
当然按钮也有其他方式使用,他有自己单独的按钮标签。效果和使用表单一样。
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
下拉框
和选择框一样,可以设置默认选中的选项。
<!-- 下拉菜单 -->
<select >
<option >香蕉</option>
<option >橘子</option>
<option >榴莲</option>
<option >草莓</option>
<option selected>樱桃</option>
</select>
lable标签
使用场景:
如下图,为了让用户有更好的体验,在我们使用单选的时候,经常会配合文字一起使用,也就是用户无论点击文字还是小圆圈都可以选中自己想选的目标,这时候就需要将文字和单选框进行捆绑。
使用方式:
1、使用lable将文字包住,然后单选框设置id进行标记,再通过for告诉lable所包含的问文字是和哪个控件绑定的。
2、直接用lable将需要绑定的控件全部绑一起。
<input type="radio" name="sex" id="man"><label for="man">男</label>
<label ><input type="radio" name="sex">女</label>