HTML表单标签
文章目录
一、form标签
解析:
作用：用于定义表单域
包含属性:
name：规定表单的名称。
method：规定用于发送表单数据的 HTTP 方法。
属性值：get默认。将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value。
post 以 HTTP post 事务的形式发送表单数据（form-data）。
target：规定在何处打开 action URL。
action：规定当提交表单时向何处发送表单数据。
autocomplete：规定是否启用表单的自动完成功能。
novalidate：如果使用该属性，则提交表单时不进行验证。
具体使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 定义表单 -->
<form name="form1" action="" method="post" target="_blank">
</form>
</body>
</html>
二、input标签
解析:
作用：用来声明允许用户输入数据的，是一个单标签
包含属性：
type:
button：定义按钮
checkbox：定义复选框
file：定义输入字段和“浏览”按钮，供文件上传
hidden：定义隐藏的输入字段
image：定义图像形式的提交按钮
password：密码框，定义密码字段
reset：重置按钮，会清除表单中的所有数据
submit：提交按钮，会把表单数据发送到服务器
text：文本框，用户可向其数据文本
value:
value属性为输入框的值，可以不填，因为当用户在输入框输入值时，value会自动赋值为输入框的值。如果填写，则直接显示在输入框内。
具体使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 文本框，默认 -->
用户名：<input type="text">
<br />
<!-- 密码框 -->
密码：<input type="password">
<br />
<!-- 复选框 -->
爱好1<input type="checkbox">
爱好2<input type="checkbox">
爱好3<input type="checkbox" checked="checkbox">
<br />
<!-- 单选按钮 -->
男：<input type="radio" name="sex">
女：<input type="radio" name="sex">
<br />
<!-- 重置按钮 -->
<input type="reset">
<!-- 提交按钮 -->
<input type="submit">
<!-- 文件上传 -->
<input type="file">
<!-- 普通按钮 -->
<input type="button">
<br />
<!-- 定义拾色器 -->
<input type="color">
<!-- 定义 date 控件（包括年、月、日，不包括时间）。 -->
<input type="date">
<!-- 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 -->
<input type="datetime-local">
<!-- 定义用于 e-mail 地址的字段 -->
<input type="email">
<!-- 定义隐藏输入字段。 -->
<br />
<input type="hidden">
<!-- 定义图像作为提交按钮。 -->
<input type="image">
<!-- New 定义 month 和 year 控件（不带时区）。 -->
<input type="month">
<!-- 定义用于输入数字的字段。 -->
<input type="number">
<br />
<!-- 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 -->
<input type="range">
<!-- 定义用于输入搜索字符串的文本字段 -->
<input type="search">
<!-- 定义用于输入电话号码的字段。 -->
<input type="tel">
<br />
<!-- 定义用于输入时间的控件（不带时区）。 -->
<input type="time">
<!-- 定义用于输入 URL 的字段。 -->
<input type="url">
<!-- 定义 week 和 year 控件（不带时区）。 -->
<input type="week">
</form>
</body>
</html>
运行结果:
三、textarea标签
解析:
作用：定义文本域(一个多行的输入控件)
包含属性:
属性 值 描述
autofocusNew autofocus 规定当页面加载时，文本区域自动获得焦点。
cols number 规定文本区域内可见的宽度。
disabled disabled 规定禁用文本区域。
formNew form_id 定义文本区域所属的一个或多个表单。
maxlengthNew number 规定文本区域允许的最大字符数。
name text 规定文本区域的名称。
placeholder text 规定一个简短的提示，描述文本区域期望的输入值。
readonly readonly 规定文本区域为只读。
requiredNew required 规定文本区域是必需的/必填的。
rows number 规定文本区域内可见的行数。
wrap hard
soft 规定当提交表单时，文本区域中的文本应该怎样换行。
具体使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<textarea rows="10" cols="30" autofocus="autofocus">
我是一个文本框。
</textarea>
</body>
</html>
运行结果:
四、 select标签
解析:
作用：用来创建下拉列表。配合option标签使用
包含属性:
属性 值 描述
autofocus autofocus 规定在页面加载时下拉列表自动获得焦点。
disabled disabled 当该属性为 true 时，会禁用下拉列表。
formNew form_id 定义 select 字段所属的一个或多个表单。
multiple multiple 当该属性为 true 时，可选择多个选项。
name text 定义下拉列表的名称。
required required 规定用户在提交表单前必须选择一个下拉列表中的选项。
size number 规定下拉列表中可见选项的数目。
五、option标签
解析:
作用：定义下拉列表中的选项,作为 select标签 或者datalist 标签一个元素使用
包含属性:
属性 值 描述
disabled disabled 规定此选项应在首次加载时被禁用。
label text 定义当使用 <optgroup> 时所使用的标注。
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。
value text 定义送往服务器的选项值。
具体使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select>
<!--selected:设置默认状态为选中状态。-->
<option value="volvo" selected="">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
运行结果:
六、button标签
解析:
作用： 定义一个点击按钮
包含属性:
属性 值 描述
disabled disabled 规定应该禁用该按钮。
name name 规定按钮的名称。
type button
reset 规定按钮的类型
submit 。
value text 规定按钮的初始值。可由脚本进行修改。
具体使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button value="按钮1" disabled="disables">禁用的按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</body>
</html>
运行结果:
扫一扫
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
