前端基础-HTML表单

表单

在这里插入图片描述

表单的作用就是用来收集用户输入的信息

表单的组成：表单域，表单元素

表单域标签：<form></form>，放置所有的表单元素

表单元素：

1.文本框

可输入明文内容的输入框----用户名

<input type="text" maxlength="6">

在这里插入图片描述

多学一招：maxlength属性可以限制最大输入长度，为了让服务器端接收到输入的数据，表单元素都需要加name属性

2.密码框

输入密文的输入框----密码

<input type="password">

在这里插入图片描述

密码框的属性和使用和文本框一样

3.单选框

只能选择一项的表单----性别选择

<input type="radio" value="0">

在这里插入图片描述

注意：要想单选框的单选功能生效，必须添加name属性，并且name属性的值必须一样，这种无法输入的表单元素必须赋值：value=“值”，默认选中项使用checked="checked"属性

代码

<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1" checked>女

在这里插入图片描述

4.复选框

可以选择多项的表单----爱好选择

<input type="checkbox" value="0">

使用方式和属性与单选框一样

示例代码

<input type="checkbox" />足球
<input type="checkbox" />排球
<input type="checkbox" checked />篮球

在这里插入图片描述

5.文件上传

<input type="file">

在这里插入图片描述

6.下拉菜单

通常用于选择籍贯或收货地址中的省市区

<select>
	<option>江苏</option>
    <option>浙江</option>
    <option>安徽</option>
</select>

默认选中项使用selected=“selected”

在这里插入图片描述

多学一招：下拉菜单可以分组展示

代码

<select>
		<optgroup label="省份">
			<option value="1">山东省</option>
			<option value="2">河北省</option>
			<option value="3" selected>河南省</option>
		</optgroup>
		<optgroup label="行业">
			<option value="1">IT互联网</option>
			<option value="2">制造业</option>
			<option value="3" selected>零售业</option>
		</optgroup>
		<optgroup label="薪资范围">
			<option value="1">1000~3000元/月</option>
			<option value="2">3000~5000元/月</option>
			<option value="3" selected>5000~8000月</option>
		</optgroup>
	</select>

在这里插入图片描述

7.文本域

可以输入很多的内容----qq的留言输入框

<textarea></textarea>

代码

<textarea></textarea>

在这里插入图片描述

多学一招：文本域可以通过两个属性来设置大小，宽度使用cols属性，高度使用rows属性

在这里插入图片描述

8.普通按钮

点击不会有任何效果

<input type="button" value="普通按钮">

在这里插入图片描述

9.提交按钮

用于提交表单的按钮

<input type="submit">

在这里插入图片描述

多学一招：该按钮点击后默认会将表单的数据提交

10.重置按钮

将表单的输入状态还原的按钮

<input type="reset">

在这里插入图片描述

多学一招：该按钮点击后会将表单的输入状态还原到最初

表单域

标签：<form></form>

作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址

第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性

注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素

代码

<form>
    用户名：<input type="text" name="username" />
    密码：<input type="password" name="password" />
    <input type="submit" />
</form>