首页 > 代码库 > 16-11-14
16-11-14
今天的学习的主要内容是表单制作，其表单制作中主要接触到的标签：<form>表格、<input>输入、<textarea>文本域、<select>下拉列表。其中<form>属性包括<form action="接收者" method（传送方式）="post/get">、<option>定义下拉表单选项。下例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 表单 -->
<!-- <form action="接收者" method="传送方法post/get
区别：1.post信息是加密的，get是明文 2.数据量不同：get单词不能超过2k，post一般不受限制 3.post主要用于向服务器传送数据，get主要向服务器要数据 4.位置不同：post主要写在form表单里，get主要以url地址栏连接的形式使用"> -->
<form>
<!-- 输入 type="类型" name="自定义的用作区分表单内容" -->
姓名：<input type="text" name="username" placeholder="姓名">
<br>
<!-- 输入 -->
密码：<input type="password" name="pass" placeholder="密码">
<br>
性别：
<!--radio 单选属性-->
男：<input type="radio" name="sex" value="http://www.mamicode.com/man">
女：<input type="radio" name="sex" value="http://www.mamicode.com/woman">
<br>
爱好：
唱歌<input type="checkbox" value="http://www.mamicode.com/1" name="hobit[]">
书法<input type="checkbox" value="http://www.mamicode.com/2" name="hobit[]">
篮球<input type="checkbox" value="http://www.mamicode.com/3" name="hobit[]">
<br>
<!-- 文本域 搭配富文本编辑器 -->
个人简介：<textarea name="detail"></textarea>
<br>
地区：
<!-- 下拉列表 -->
<select name="area">
<!-- 定义下拉列表中的选项 -->
<option value="http://www.mamicode.com/1">北京</option>
<option value="http://www.mamicode.com/2">天津</option>
<!-- 被选中的 默认选择 -->
<option value="http://www.mamicode.com/3" selected>河北</option>
</select>
<br>
<input type="submit" name="" value="http://www.mamicode.com/登录">
</form>
</body>
</html>
表单的制作主要用于用户登陆注册页面，但在网页的整体布局制作中，需配合div或是以列表形式表达其效果。在网页的制作中，需要整体安排布局，先搭好框架，然后再添加内容。要制作有条理性，保持清晰地思路，便会变得很简单。
16-11-14