概念:一个包含交互的区域,用于收集用户提供的数据。
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索button>
form>
<input id="zhanghu" type="text" name="account" maxlength="20">
常用属性如下:
name 属性:数据的名称。
value 属性:输入框的默认输入值。
maxlength 属性:输入框最大可输入长度。
<input id="mima" type="password" name="pwd" maxlength="20">
常用属性如下:
name 属性:数据的名称。
value 属性:输入框的默认输入值(一般不用,无意义)。
maxlength 属性:输入框最大可输入长度。
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male" checked>男
常用属性如下:
name 属性:数据的名称,注意:想要单选效果,多个 radio 的 name 属性值要保持一致。
value 属性:提交的数据值。
checked 属性:让该单选按钮默认选中。
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
常用属性如下::
name 属性:数据的名称。
value 属性:提交的数据值。
checked 属性:让该复选框默认选中。
<select name="from">
<option value="黑">黑龙江option>
<option value="辽">辽宁option>
<option value="吉">吉林option>
<option value="粤" selected>广东option>
select>
常用属性及注意事项:
- name 属性:指定数据的名称。
- option 标签设置 value 属性, 如果没有 value 属性,提交的数据是 option 中间的文字;如果设置了 value 属性,提交的数据就是 value 的值(建议设置 value 属性)
- option 标签设置了 selected 属性,表示默认选中。
<input type="hidden" name="tag" value="100">
用户不可见的一个输入区域,作用是: 提交表单的时候,携带一些固定的数据。
name 属性:指定数据的名称。
value 属性:指定的是真正提交的数据。
<input type="submit" value="点我提交表单">
<button>点我提交表单button>
注意:
- button 标签 type 属性的默认值是 submit 。
- button 不要指定 name 属性
- input 标签编写的按钮,使用 value 属性指定按钮文字。
<input type="reset" value="点我重置">
<button type="reset">点我重置button>
注意点:
- button 不要指定 name 属性
- input 标签编写的按钮,使用 value 属性指定按钮文字。
<input type="button" value="普通按钮">
<button type="button">普通按钮button>
注意点:普通按钮的 type 值为 button ,若不写 type 值是 submit 会引起表单的提交。因为button的默认值为submit
<textarea name="msg" rows="22" cols="3">我是文本域textarea>
常用属性如下:
- rows 属性:指定默认显示的行数,会影响文本域的高度。
- cols 属性:指定默认显示的列数,会影响文本域的宽度。
- 不能编写 type 属性,其他属性,与普通文本输入框一致。
给表单控件的标签设置 disabled 既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
label 标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下:
<label for="mima">密码:label>
<input id="mima" type="password" name="pwd" maxlength="20"><br>
<label>
<input type="radio" name="sex" value="male" checked>男
label>
fieldset 可以为表单控件分组、 legend 标签是分组的标题。
<fieldset>
<legend>主要信息legend>
<label for="zhanghu">账户:label>
<input id="zhanghu" type="text" name="account" maxlength="10"
>
<label>
密码:
<input id="mima" type="password" name="pwd" maxlength="6">
label> <br>
性别:
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男label>
<label>
<input type="radio" name="gender" value="female" id="nv">女
label>
fieldset>