您的位置：首页 > Web前端

学习前端的日子02，部分转载

2017-01-14 19:43 288 查看

1月13号

今天满满的一天，学习的内容是 table（表格），form（表单）

label是form（表单的内通常使用的标签）

input是输入框，还是另一个就是output输出

input有不同的表单控件，比如

表单控件：
文本框、文本域、按钮、单选框、复选框
method:
post/get（保密/公示）
1. 文本框（文本/密码）
<form>
<input type="text/password" name="名称" value="文本" /> password多用于密码的使用
</form>
type：有“text”和“password”两种类型
name：为文本框命名，方便后台ASP和PHP使用
value：文本框默认值，一般起提示作用
2. 文本域（多行文本）
<textarea rows="行数" cols="列数">默认文本内容</textarea>
cols：多行输入域的列数
rows：多行输入域的行数
3. 单选框、复选框
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
type：radio单选，checkbox复选框
value：提交数据到服务器的值，后台PHP处理使用
name：为控件命名，以备后台程序ASP和PHP使用
checked：checked="checked"时，此选项默认被选中
注意：同一组的单选按钮，name取值一定要一致
4. 下拉列表框
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<label for="book>看书</label>
<option value="看书" id="book">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input   type="submit"   value="提交">按钮控件
<input   type="reset"    value="重置"  /> 按钮控件
</form>
value：向服务器提交值
selected：设置selected="selected"时，默认选中
multiple：multiple="multiple"时，可以使用Ctrl多选，但很丑
label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio

自己打的代码

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">作用是防止乱码
<title>表单</title>
</head>

<body>
<form action="" method="get">


<label> 用户名</label><input type="text" value="" />
<label for="">密码框</label><input type="password" value="" />
<label for="">再次输入密码</label><input type="password" value="" />

<label>隐藏域</label><input type="hidden" /> 男
<input type="radio" name="名字" />
女<input type="radio" name="名字" />
一月<input type="checkbox" name="" value="" />
二月<input type="checkbox" name="" value="" />
三月<input type="checkbox" name="" value="" checked="checked"/><br />
<input type="button" name="" value="登录" />

<input type="submit" />
<button>刷新</button>
<input type="image" src="img/chun.jpg" />
<br />
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="" selected="selected">光</option>
</select>
<textarea name=""id="owo" cols="10" placeholder="xxxxxx·" style="resize: none;"></textarea>
<input type="reset" /></form>
</body>

</html>
表格

<table>表格内容</table> 创建表格
<caption>标题文本</caption> 为表格添加标题文本
<tbody>...</tbody> 若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）
<tr>表格一行</tr> 表格中的一行
<td>表格单元格</td> 表格中的一个单元格
<th>表格表头</th> 表格头部的一个单元格，表格表头

colspan是合并行，在同行里减掉的合并的数目减一，rowspan是合并列-在同列减掉的格子是合并的数目减一。作用于合并单元格使用

具体还是操作使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航