-
标签基本结构:
<form>
<label>111</label>
</form>
-
表格中常用的几种标签:
label、input、select、option、textarea
label:为input标签定义标记信息。
input:最重要的表单元素,可以根据不同的type属性,变化为多种形态。
select:定义下拉列表。
option:定义列表中待选择的选项。
textarea:定义多行输入框(文本域)。
-
常用的几种属性设置:
name、id、value、checked、selected、src、onclick、disabled、multiple、action、method、placeholder
name:指定控件的名称,可重复。
id:指定标签的唯一标识。
value:收集控件需要传递的值。
checked:复选框中默认被选中的项目。
selected:列表框组默认被选中的项目。
src:图片框的图片来源。
onclick:鼠标点击事件。
disabled:表示用户不能与元素交互,即“锁死”。
multiple:允许多选(适合普通列表框)。
action:表示表单要提交到的后台程序的网址。
method:表示表单提交的方式,有get或post。
placeholder:表示提示文本,将以浅色文字写在文本框中,并不是文本框中的值。
-
input中的几种type设置:
text、password、checkbox、radio、button、submit、reset
text:单行文本域。
password:密码域。
checkbox:复选框。
radio:单选按钮,互斥的单选按钮应该设置它们的name为相同值。
button:创建可以点击的按钮。
submit:创建提交按钮。
reset:重置按钮。
-
示例:
注册表单代码示例。
<!DOCTYPE html>
<html>
<head>
<title>表单测试</title>
</head>
<body>
<!-- action属性代表进入后台的位置
method属性代表传入到后台的提交方式(post、get)
暂时不用
-->
<form action="" method="">
<label>姓名:</label>
<input type="text" value="yasuo" name="" id=""><br>
<label>密码:</label>
<input type="password" value="123" name="" id=""><br>
<label>重复密码:</label>
<input type="password" value="123" name="" id=""><br>
<label>性别:</label>
<!-- radio类型的单选框按钮,需要设置相同的name,否则可以同时选中所有按钮 -->
<input type="radio" checked="checked" name="xb">
<label>男</label>
<input type="radio" name="xb">
<label>女</label><br>
<label>兴趣爱好:</label>
<input type="checkbox" checked="checked" name="">
<label>LOL</label>
<input type="checkbox" name="">
<label>云顶之弈</label>
<input type="checkbox" name="">
<label>王者荣耀</label><br>
<label>生日:</label>
<select>
<option>1996</option>
<option selected="selected">1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
<label>年</label>
<select>
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label>月</label>
<select>
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label>日</label><br>
<label>头像:</label>
<img src="image/yasuo.jpg" width="50" height="50"><br>
<input type="button" name="" value="普通按钮">
<input type="submit" name="" value="提交按钮">
</form>
</body>
</html>
利用表格实现:对齐效果示例。
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
</head>
<body>
<form>
<table width="400">
<tr>
<td align="right">姓名:</td>
<td><input type="text" name="" id="" value="yasuo"></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="" id="" value="123"></td>
</tr>
<tr>
<td align="right">重复密码:</td>
<td><input type="password" name="" id="" value="123"></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" name="xb" id="" checked="checked">男
<input type="radio" name="xb" id="">女
</td>
</tr>
<tr>
<td align="right">兴趣爱好:</td>
<td>
<input type="checkbox" name="" id="" checked="checked">LOL
<input type="checkbox" name="" id="">云顶之弈
<input type="checkbox" name="" id="">王者荣耀
</td>
</tr>
<tr>
<td align="right">生日:</td>
<td>
<select>
<option selected="selected">1996</option>
<option>1997</option>
</select>年
<select>
<option selected="selected">1</option>
<option>2</option>
</select>月
<select>
<option>1</option>
<option selected="selected">2</option>
</select>日
</td>
</tr>
<tr>
<td align="right">头像:</td>
<td><img src="image/yasuo.jpg" width="40" height="40"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" name="" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>