form表单标签是很重要的一个标签,当用户前后端有数据交互的时候,form表单是不可缺少的。
一、form表单的定义与用法
1.标签用于为用户输入创建 HTML 表单。
2.表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
3.表单用于向服务器传输数据。
注释:form 元素是块级元素,其前后会产生折行。
用法:<form action="" method="" enctype="" autocomplete="">
二、常用的表单元素
【input标签】
表示输入框,有多种形式,可以根据type属性来确定显示哪种输入框。
用法:<input name="" type="属性" >
input属性 | 说明 |
---|---|
text | 单行文本输入,可用于输入账号 |
password | 密码输入框 |
radio | 单选框 |
check | 多选框 |
date | 日期显示 |
datetime | 时间显示 |
button | 普通按钮(多用于JS绑定事件) |
reset | 重置 |
submit | 提交 |
textarea | 超大的文本框,可用于写简介 |
select | 下拉菜单 |
三、常用表单元素的用法
强调:input\select\textarea 都要有name属性
【text元素】
用于建立一个单行文本输入框
用法:
<p>
<label for="yhm">用户名:</label>
<input id="yhm" name="username" type="text" readonly>
<input name="username" type="text" placeholder="小强" disabled>
</p>
【password元素】
用于建立密码输入框
<p>密码:
<input name="password" type="password">
</p>
【radio元素】
用于创建单选框
<p>性别:
<input name="gender" type="radio" value="1">男
<input name="gender" type="radio" value="0">女
<input checked name="gender" type="radio" value="2">保密
</p>
注意:其中只有name相等时,才可以进行单选,否则可以多选。
【checkbox元素】
用于创建多选框
<p>爱好:
<input name="bobby" type="checkbox" value="football">足球
<input name="hobby" type="checkbox" value="doublecolorball">双色球
<input name="hobby" type="checkbox" value="basketball">篮球
</p>
【textarea属性】
用于创建超大的文本框,一般用于写简介
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
注意:cols为列数 rows为行数
【select属性】
用来创建下拉菜单
<select name="form1" id="" multiple>
<option value="sx">陕西</option>
<option value="sc">四川</option>
</select>
<p>
<select name="form2" id="">
<optgroup label="北京">
<option value="hd">海淀区</option>
<option value="cy">朝阳区</option>
</optgroup>
</select>
</p>
注意:
readonly为只读,即只能读取文本框中的内容不可修改
disabled为禁用一个input元素,即不能对input元素进行任何操作
value=“ xxx”为设置文本框中的默认值(实际存在)
placeholder=“xxx”为设置一个灰色的默认值(不是实际存在的值)