1.表单的基本实现
单行文本框
<tr>
<td>用户名</td>
<td><input type="text" name="uesrname" placeholder="请输入用户名"><br></td>
</tr>
<!--placeholder 为输入框的提示文字,当点击输入时,会自动消失-->
密码框
<tr>
<td>密码</td>
<td><input type="password" name="password" placeholder="请输入密码"></td>
</tr>
单选按钮组
<tr>
<td>性别</td>
<td>
<label for="gender-male">
<input id="gender-male" type="radio" name="gender" value="male">男
</label>
<label for="gender-female">
<input id="gender-female" type="radio" name="gender" value="female" checked >女
</label>
</td>
</tr>
<!--label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。-->
<!--<label> 标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。-->
复选按钮
<tr>
<td>爱好</td>
<td>
<label for="hobby-basketball">
<input id="hobby-basketball" type="checkbox" name="hobby" value="basketball" checked>篮球
</label>
<label for="hobby-football">
<input id="hobby-football" type="checkbox" name="hobby" value="football">足球
</label>
<label for="hobby-read">
<input id="hobby-read" type="checkbox" name="hobby" value="read">阅读
</label>
</td>
</tr>
下拉菜单列表
<tr>
<td>地址</td>
<td>
<span>
<select name="shengfen" style="width:80px">
<option value="gansu">甘肃</option>
<option value="jiangxi">江西</option>
<option value="shanxi">山西</option>
</select>
省
</span>
<span>
<select name="shi" style="width:80px">
<option value="datong">大同</option>
<option value="taiyuan">太原</option>
<option value="linfen">临汾</option>
</select>
市
</span>
<span>县/区</span>
<input type="text">
</td>
</tr>
多行文本框
<tr>
<td >简介</td>
<td >
<textarea name="description" cols="30" rows="5" placeholder="请输入简介">
</textarea>
</td>
</tr><br>
附件按钮
<tr>
<td >头像</td>
<td >
<input type="file" name="file"> <br>
</td>
</tr><br>
插件按钮
<tr>
<td>出生日期</td>
<td>
<input type="date" name="birth">
</td>
</tr>
提交按钮
<tr>
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
2.表单元素
input 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1. input总结
单行文本框<input type="text">
密码框<input type="password">
单选按钮<input type="radio">
复选按钮<input type="checkbox">
附件<input type="file">
提交按钮<input type="submit">
h5拓展:搜索框,日期框,数字框,email框…
<input type="search">
<input type="date">
<input type="number">
<input type="email">
input的属性
type 不同的值对性不同的形式
name 参数的key(不能缺省)
value 参数的value(按钮的时候不能缺省)
placeholder 提示语
checked 用在单选按钮和复选按钮中表示默认选中
selected 用在下拉菜单中表示默认选中
【注意】:checked和selected可以为单值属性
2. select
select 元素可创建单选或多选菜单。
select 元素中的 标签用于定义列表中的可用选项。
下拉菜单
<select name="shenfen">
<option value="shanxi">山西</option>
<option value="jiangxi">江西</option>
<option value="甘肃">甘肃</option>
</select>
select中的子元素一定为option,option中一般要添加value表示当选中该元素的时候,select的参数值为该value值,option中的value值可以不设置,那么value默认为文本值
属性
- size,每次显示的个数
- multiple,是否可以多选
- selected,选中
3. textarea
textarea标签定义多行的文本输入控件,即多行文本域。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体
可以通过 cols 和 rows 属性来规定 textarea 的尺寸
<textarea name="" placeholder="" cols="30" rows="10"></textarea>
4. 插件(日期选择,地址选择,富文本)
3.实体
空格
大于号 >
小于号 <
版权号©
删除(叉)×
4.其他表单
1.details
details标签用于描述文档或文档某个部分的细节。
<details>
<summary>111</summary>
<summary>222</summary>
</details>
2.datalist
datalist标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
使用 input 元素的 list 属性来绑定 datalist。
<input type="text" name="" list="test">
<datalist id="test">
<option>111</option>
<option>222</option>
</datalist>
3.radio
input标签中type的属性值,当<input type="radio">
时表示定义单选按钮
其中checked属性表示默认选中
4.多行文本框
<textarea rows="10" cols="20" wrap="off" readonly=""></textarea>
属性:
-
wrap:是否自动换行
wrap=off 不换行 wrap=hard 自动硬换行,换行元素一起被传到服务器 wrap=soft 软换行
-
readonly:只读
-
disabled:禁用