HTML-表单
一、HTM表单
HTML 表单用于搜集不同类型的用户输入,HTML 表单包含表单元素。
1.<form>
元素
HTML 表单用于收集用户输入。<form>
元素定义 HTML 表单:
<form>
.
form elements
.
</form>
2.<form>
元素属性
二、表单元素
1.<input>
元素
<input>
元素是最重要的表单元素。<input>
元素有很多形态,根据不同的 type 属性。
(1)元素属性:
1.1 text的常用type属性值
<input type="text">
定义用于文本输入的单行输入字段:
(1)代码结构:
form action="">
<div>学号:</div>
<input type="text">
<div>姓名:</div>
<input type="text">
</form>
(2)运行结果:
1.2.radio属性
<input type="radio">
定义单选按钮。单选按钮允许用户在有限数量的选项中选择其中之一
(1)代码结构:
<form action="">
<input type="radio" name="sex" value="male" checked>male
<input type="radio" name="sex" value="female">famale
</form>
name 用来控制是否为单选,如果想要实现单选,必须保证多个input中的name值相等
value 为 input 元素设定值,对于不同的输入类型,value 属性的用法也不同:
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked用来设定默认值
(2)运行结果:
1.3.submit属性
<input type="submit">
定义用于向表单处理程序(form-handler)提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指定。
(1)代码结构:
<form action="">
<div>学号</div>
<input type="text" value="000">
<div>姓名</div>
<input type="text" value="xxx">
<br>
<input type="submit" value="submit">
</form>
(2)运行结果:
1.4.checkbox属性
该属性用来实现多选框的功能
(1)代码结构:
<form action="">
<div>爱好:</div>
<input type="checkbox" name="hobby" >篮球
<input type="checkbox" name="hobby" >足球
<input type="checkbox" name="hobby" >羽毛球
</form>
(2)运行结果:
2.<select>
元素(下拉列表)
(1)代码结构:
<form action="">
<span>所在城市:</span>
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
</form>
(2)运行结果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210310133422639.png
3.<textarea>
元素
<textarea>
元素定义多行输入字段(文本域):
(1)代码结构:
<form action="">
<textarea name="message" id="" cols="30" rows="10">
表单元素textarea
</textarea>
</form>
(2)运行结果:
4.lable标签
lable标签用于绑定一个表单元素,当点击lable标签的文本时,浏览器就会自动将焦点转到对应的表单元素上,来增加用户体验
(1)代码结构:
<form action="">
<div>爱好:</div>
<input type="checkbox" name="hobby" id="basketball"><label for="basketball">篮球</label>
<input type="checkbox" name="hobby" id="football"><label for="football">足球</label>
<input type="checkbox" name="hobby" id="badminton"><label for="badminton">羽毛球</label>
</form>