HTML学习:表单元素
form标签
form标签:表单的意思,容器级标签,内部存放可输入的控件。
如果输入的表单需要提交到数据库 所有的控件需要被form表单包裹
提供的两种方法:
- method:方法的意思,指的数据提交的方法,属性值是post和get。
- action:数据提交的位置。
(具体后期在学习)
input标签
input标签:输入框的一种,但是不仅仅只有输入框,通过type属性,可以拓展多功能(type属性有很多)。
输入框
最简单的:
<form action="">
<p>
<!-- 设置p标签是为了可以自动换行 -->
用户名:<input type="text">
<!-- 默认属性是text 这时打开就是一个单行的输入框 -->
</p>
</form>
输入框有两个重要属性:
- value:设置默认显示的内容,属性值为自定义内容。
- placeholder: 属性作用是如果没有value的时候提示用户的文字占位符。
<!-- value属性举例 -->
<form action="">
<p>
用户名:<input type="text" value="刘振东">
<!-- value绑定的是用户输入的内容 即回显用户输入的内容 和用户输入的值有直接关系 -->
</p>
</form>
value属性实现:
<!-- placeholder属性举例 -->
` <form action="">
<p>
<!-- placeholder是在没有value的时候提示用户的文字占位符-->
用户名:<input type="text" placeholder="请输入用户名">
</p>
</form>
placeholder属性实现:
密码框
通过type值为password设置的,显示效果是输入后通过掩码形式显示的。
<form action="">
<p>
<!-- 修改为type="password" 这样使得密码隐藏-->
密码:<input type="password" placeholder="请输入密码">
</p>
</form>
单选框
通过type值为radio设置的,单选按钮都是成组出现的。
如果只是单纯地设置,那除了单选还会有复选情况。
<form action="">
<p>
<!-- 单选框 -->
性别:<input type="radio">男
<input type="radio">女
<input type="radio">保密
</p>
</form>
单选框复选情况:
解决方案:
添加name属性,即有了互斥功能(相同的name属性下,只能选一个)
<form action="">
<p>
<!-- 单选框 -->
性 别:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</p>
</form>
复选框(多选框)
通过type值为checkbox设置。
复选框可以通过对自身进行多次点击实现选择或者取消(单选框不可以),多选框也可以选一个或多个。
<form action="">
<p>
爱 好:
<!-- 可以单纯 <input type="checkbox">运动 -->
<!-- 为了成组出现 还是设置name属性一致 -->
<input type="checkbox" name="hobby">运动
<input type="checkbox" name="hobby">绘画
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">弹琴
<input type="checkbox" name="hobby">其他
</p>
</form>
单选框和多选框都有一个默认被选择的功能,需要给input标签添加一个checked="checked"
<form action="">
<p>
<!-- 单选框 -->
性 别:
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</p>
<p>
爱 好:
<!-- 可以单纯 <input type="checkbox">运动 -->
<!-- 为了成组出现 还是设置name属性一致 -->
<input type="checkbox" name="hobby" checked="checked">运动
<input type="checkbox" name="hobby">绘画
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">弹琴
<input type="checkbox" name="hobby">其他
</p>
</form>
现在如果点击文字是不能触发对应单选或者多选框的点击事件的,所以需要label标签去扩大触发范围。
<form action="">
<p>
<!-- 单选框 -->
性 别:
<label>
<input type="radio" name="sex" checked="checked">男
</label>
<label>
<input type="radio" name="sex">女
</label>
<label>
<input type="radio" name="sex">保密
</label>
</p>
</form>
文本域
- 标签是textarea,是一个双标签,且是文本级标签。
- 之前学习的input是单行输入框,只能输入单行文本,如果需要使用多行文本,就使用textarea标签。
属性值rows和cols
- rows:定义文本域的可视区域有几行,单位是数字
- cols:当前行显示的字节数量(以英文为准),单位是数字
placeholder:占位符
<form action="">
<p>
<!-- cols列数,数字是几就能写几列文字(站在英语角度 字节数)
rows行数,数字是几就能写几行文字 -->
自我介绍:
<textarea rows="5" cols="10" placeholder="请输入自我介绍"></textarea>
</p>
</form>
也可以通过设置style性的resize属性,值为none,去掉可拖拽区域
<form action="">
<p>
自我介绍:
<!-- style="resize: none; 去掉可拖拽区域 -->
<textarea rows="5" cols="10" placeholder="请输入自我介绍" style="resize: none;"></textarea>
</p>
</form>
下拉菜单
需要一组标签进行制作:两个标签select和option
- select:选择的意思,表示搭建下拉项
- option:选项的意思,表示搭建下拉项
- 关系:select>option
<form action="">
<p>
籍贯:
<select>
<!-- 默认是第一个选项被显示 -->
<option>深圳</option>
<option>上海</option>
<option>北京</option>
</select>
</p>
</form>
此时刷新页面发现默认是第一个选项显示(而不是选中),添加selected="selected"来决定默认选中项(被选中)
<form action="">
<p>
籍贯:
<select>
<option>深圳</option>
<!-- 设置默认被选中项 -->
<option selected="selected">上海</option>
<option>北京</option>
</select>
</p>
</form>