表单
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单标签
标签 | 描述 |
---|---|
form | 供用户输入的表单 |
input | 输入 |
textarea | 文本域 |
label | 标签 |
select | 下拉选择列表 |
optgroup | 选项组 |
option | 下拉列表中的选项 |
button | 按钮 可以触发form表单提交的动作 |
fieldset | 一组相关的表单元素,并使用外框包含起来 |
legend | fieldset元素的标题 |
form 标签属性
属性 | 值 | 描述 |
---|---|---|
accept | MIME_type | HTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的) |
accept-charset | character_set | 规定服务器可处理的表单数据字符集。 |
action | URL | 规定当提交表单时向何处发送表单数据。 |
autocomplete | on off | 规定是否启用表单的自动完成功能。 |
enctype | application/x-www-form-urlencoded , multipart/form-data(文本上传) , text/plain | 规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method=“post” 的情况) |
method | get post | 向服务器提交数据。geturl明文提交,参数4kb大小,只能携带不敏感参数。post 提交敏感信息数据 |
name | text | 规定表单的名称。 |
novalidate | novalidate | 如果使用该属性,则提交表单时不进行验证。 |
target | _blank , _self , _parent , _top | 规定在何处打开 action URL。 |
注意:form要配合其他表单使用
input 标签属性
属性 | 值 | 描述 |
---|---|---|
accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type=“file”) |
align | left , right , top , middle , bottom | HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type=“image”) |
alt | text | 定义图像输入的替代文本。 (只针对type=“image”) |
autocomplete | on off | autocomplete 属性规定 元素输入字段是否应该启用自动完成功能。 |
autofocus | autofocus | 属性规定当页面加载时 元素应该自动获得焦点。 |
checked | checked | checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=“checkbox” 或者 type=“radio”) |
disabled | disabled | disabled 属性规定应该禁用的 元素。 |
form | form_id | form 属性规定 元素所属的一个或多个表单。 |
formaction | URL | 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”) |
formenctype | application/x-www-form-urlencoded , multipart/form-data , text/plain | 属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)。 |
formmethod | get post | 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”) |
formnovalidate | formnovalidate | formnovalidate 属性覆盖 元素的 novalidate 属性。 |
formtarget | _blank ,_self, _parent, _top ,framename | 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”) |
height | pixels | 规定 元素的高度。(只针对type=“image”) |
list | datalist_id | 属性引用 元素,其中包含 元素的预定义选项。 |
max | number date | 属性规定 元素的最大值。 |
maxlength | number | 属性规定 元素中允许的最大字符数。 |
min | number date | 属性规定 元素的最小值。 |
multiple | multiple | 属性规定允许用户输入到 元素的多个值。 |
name | text | name 属性规定 元素的名称。 |
pattern | regexp | pattern 属性规定用于验证 元素的值的正则表达式。 |
placeholder | text | placeholder 属性规定可描述输入 字段预期值的简短的提示信息 。 |
readonly | readonly | readonly 属性规定输入字段是只读的。 |
required | required | 属性规定必需在提交表单之前填写输入字段。 |
size | number | size 属性规定以字符数计的 元素的可见宽度。 |
src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”) |
step | number | step 属性规定 元素的合法数字间隔。 |
type | button , checkbox , color ,date , datetime ,datetime-local , email , file , hidden ,image , month , number , password , radio , range , reset , search , submit(触发form表单提交) , tel , text , time , url ,week | type 属性规定要显示的 元素的类型。 |
value | text | 指定 元素 value 的值。 |
width | pixels | width 属性规定 元素的宽度。 (只针对type=“image”) |
<form action="post" enctype="multipart/form-data">
<label for="user">
用户名:<input type="text" id="user" name='username'>
</label><br><br>
<label for="pass">
密码:<input type="password" id="pass" name="password">
</label><br><br>
<label for="email">
邮箱:<input type="email" name="email" id="email">
</label><br><br>
<label for="tel">
电话:<input type="tel" name="tel" id="tel">
</label><br><br>
性别:
<label for="nan">
男<input type="radio" name="xingbie" id="nan" value="" checked="checked">
</label>
<label for="nv">
女<input type="radio" name="xingbie" id="nv" value="">
</label>
<label for="other">
Gay<input type="radio" name="other" id="other" disabled>
</label><br><br>
爱好:
<label for="eat">
吃<input type="checkbox" name="hubby" id="eat">
</label>
<label for="play">
玩<input type="checkbox" name="hubby" id="play">
</label>
<label for="drink">
喝<input type="checkbox" name="hubby" id="drink">
</label><br><br>
日期:
<label for="date">
<input type="date" name="date" id="date">
</label><br><br>
日期时间:
<label for="local_time">
<input type="datetime-local" name="" id="local_time">
</label><br><br>
<select name="" id="">
<optgroup label="北京">
<option value="1">朝阳区</option>
<option value="2">xxoo区</option>
<option value="3">ooxx区</option>
</optgroup>
<optgroup label="上海">
<option value="4">黄浦区</option>
<option value="5">青浦区</option>
<option value="6">徐汇区</option>
</optgroup>
</select><br><br>
<label for="file">
文件:<input type="file" name="file" id="file">
</label><br><br>
<textarea name="desc" id="" cols="30" rows="10"></textarea><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
select 标签
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bran.im</title>
</head>
<body>
<form action="">
<select name="" id="">
<optgroup label="北京">
<option value="1">朝阳区</option>
<option value="2">xxoo区</option>
<option value="3">ooxx区</option>
</optgroup>
<optgroup label="上海">
<option value="4">黄浦区</option>
<option value="5">青浦区</option>
<option value="6">徐汇区</option>
</optgroup>
</select>
</form>
</body>
</html>