前端基础-HTML表单

• 2020 年 4 月 7 日
• 笔记

表单

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

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

表单域标签：<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>