阿离王带你零基础学习前端

# 表单

学习表单之前，我们先来看看这个简陋的登录框，纯html标签是这样的，等以后我们学习了css美化它，就好看了

# input输入框

<input>标签规定了用户可以在其中输入数据的输入字段。

属性说明：

  • name 名称，与表单数据一起提交。

  • placeholder 占位符

  • value 值

  • type 类型

    常用的

    • text 默认。定义一个单行的文本字段
    • password 定义密码字段（字段中的字符会被遮蔽）。
    • number 定义用于输入数字的字段。
    • checkbox 定义复选框。
    • radio 定义单选框。
    • file 定义文件选择字段和 "浏览..." 按钮，供文件上传。
    • button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
    • submit 定义提交按钮。
    • reset 定义重置按钮（重置所有的表单值为默认值）。
    • hidden 定义隐藏输入字段。

    不太常用的

    • image 定义图像作为提交按钮。
    • color 定义拾色器。
    • search 定义用于输入搜索字符串的文本字段。
    • date 定义 date 控件（包括年、月、日，不包括时间）。
    • datetime 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
    • datetime-local 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
    • email 定义用于 e-mail 地址的字段。
    • month 定义 month 和 year 控件（不带时区）。
    • range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
    • tel 定义提交按钮。
    • time 定义用于输入时间的控件（不带时区）。
    • url 定义用于输入 URL 的字段。
    • week 定义 week 和 year 控件（不带时区）。

  • 其他属性：

    • autofocus：这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有autofocus属性，它是一个布尔值。

    • readonly：这个布尔属性用于指明用户无法修改控件的值。

    • disabled：这个布尔属性表示此表单控件不可用。并且，禁用的控件的值在提交表单时也不会被提交。如果type属性为hidden，此属性将被忽略。

    • checked：如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.

    • accept：如果该元素的type属性的值是file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。

      • audio/* 表示音频文件
      • video/* 表示视频文件
      • image/* 表示图片文件

    • multiple：这个属性指示用户能否输入多个值。这个属性仅在type属性为email或file的时候生效,否则被忽视.

    • height：如果type属性的值是image，这个属性定义了按钮图片的高度。

    • width：如果type属性的值是image，这个属性定义了按钮图片的宽度。

    • required：这个属性指定用户在提交表单之前必须为该元素填充值. 当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用. :optional 和 :required CSS 伪元素的样式将可以被该字段应用作外观.

    • autosave：这个属性应该定义为唯一值。如果type属性的值是search，那么之前的搜索词值将在整个页面加载过程中保持在下拉菜单中。

    • src：如果type属性的值是image, 这个属性指定了按钮图片的路径; 否则它被忽视.

    • form：指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。

# 普通的输入框

<input type="text" placeholder="请输入用户名" />

# 密码框

<input type="password" placeholder="请输入密码" />

# 仅支持输入数字框

<input type="number" placeholder="请输入数字" />

# 选择文件

accept属性的值：

  • audio/* 表示音频文件
  • video/* 表示视频文件
  • image/* 表示图片文件
<!-- 单选 -->
<input type="file" />

<!-- 多选 -->
<input type="file" multiple />

<!-- 只能选择图片 -->
<input type="file"  accept="image/*" />

# 单选按钮 radio

本例中 的name要一致，才能是同一组

<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女

# 复选框 checkbox

本例中 的name要一致，才能是同一组

<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car

# <label></label> 元素

定义和用法 <label> 标签为 input 元素定义标注（标记）。

  • label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
  • 如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<div>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
</div>
<div>
  <label for="female">女</label>
  <input type="radio" name="sex" id="female" />
</div>

# 提交重置按钮

<input type="submit" value="提交">
<input type="reset"  />

# textarea 多行文本域输入框

属性说明：

  • rows：元素的输入文本的行数（显示的高度）。
  • cols：文本域的可视宽度。必须为正数，默认为20。
  • autofocus: 在页面加载后文本区域自动获得焦点。
  • maxlength: 文本区域的最大字符数。
  • placeholder：文本区域预期值的简短提示，也叫占位符
<textarea name="textarea" rows="10" cols="50"></textarea>

# select 下拉框

select 元素是一种表单控件，可创建选项菜单。菜单内的选项为 option , 可以由 optgroup 元素分组。选项可以被用户预先选择。

属性说明：

  • selected：表示默认选中选项
<select name="city">
	<option value="广东">广东</option>
	<option value="广西" selected>广西</option>
	<option value="上海">上海</option>
</select>

# optgroup 下拉框分组

optgroup 元素会创建包含在一个 select 元素中的一组选项

<select name="city">
	<optgroup label="广东">
		<option value="广州">广州</option>
		<option value="深圳">深圳</option>
	</optgroup>
	<optgroup label="广西">
		<option value="桂林">桂林</option>
		<option value="南宁">南宁</option>
	</optgroup>
</select>

# form 表单

form 表单，用来收集用户输入信息，并 web 服务器提交信息。

属性说明：

  • action:一个处理这个form信息的程序所在的URL
  • method:规定用于发送表单数据的 HTTP 方法, 可能的值有:
    • get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器.
    • post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
    • enctype:当 method 属性值为 post 时, enctype 是提交form给服务器的内容的 MIME 类型 。
      • application/x-www-form-urlencoded: 如果属性未指定时的默认值。 -multipart/form-data: 这个值用于一个 type 属性设置为file的 <input> 元素。
      • text/plain
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单</title>
	</head>
	<body>
		<form action="服务器的API地址" method="get" enctype="application/x-www-form-urlencoded">
		<div>
			用户名: <input type="text" name="name" placeholder="请输入用户名">
		</div>
		<div>
		  选择性别: 
		  <input type="radio" name="gender" value="man" />男
		  <input type="radio" name="gender" value="woman" /> 女
		</div>
		  <input type="submit" value="提交">
		</form>
	</body>
</html>
更新时间: 2021年8月15日星期日下午3点30分

← 设置页面图标 →