2、表单元素
2019-02-20 本文已影响0人
calvinbj
表单元素
1、表单域
语法：
<form name="表单名称" method="post/get" action=""></form>
说明：get是用来从服务器上获得数据，而post是用来向服务器上传递数据。出于安全性考虑，建议最好使用post提交数据。
表单控件.png
实例：
1)、value是初始值
<form name="f1" method="post" action="">
姓名：<input type="text" value="请输入您的姓名" />
</form>
如下图，可以看到，文本框里面出现的“请输入您的姓名”是黑色的，体现的是文本框的初始值，虽然有提示作用，但是，我们在输入值的时候，还要删掉“请输入您的姓名”这几个字。
value.png
2)placeholder
针对上面出现的问题，既要出现提示信息，又不想要再进行删除提示信息的操作，placeholder很好的解决这个问题。
<form name="f1" method="post" action="">
姓名：<input type="text" placeholder="请输入您的姓名" />
</form>
说明，placeholder的作用是在文本框出现提示信息，并且输入值时，提示信息不在文本框内。（字体颜色也变成浅浅的。）
placeholder.png
3)这里出现姓名和密码想要单独一行的问题，可以分别用<p></p>框起来。
<form name="f1" method="post" action="">
<p>姓名：<input type="text" placeholder="请输入您的姓名" /> </p>
<p>密码：<input type="password" /></p>
</form>
<p>对“姓名”和“密码”分行.png
4)submit和reset
<form name="f1" method="post" action="">
<p>姓名：<input type="text" placeholder="请输入您的姓名" /> </p>
<p>密码：<input type="password" /></p>
<p><input type="submit" value="登录"> <input type="reset" value="重新填写"></p>
</form>
submit和reset.png
其他控件
其他控件.png
1）单选框
如果没有在<input type="radio" name="sex">里面添加name这个属性，那么，男和女后面的单选框可以同时选上。
这里，通过男和女后面的<input type="radio" name="sex">，设置同一个name="sex"，使得结果只能二选一。
<form name="f1" method="post" action="">
<p>姓名：<input type="text" placeholder="请输入您的姓名" /> </p>
<p>密码：<input type="password" /></p>
<p><input type="submit" value="登录"> <input type="reset" value="重新填写"></p>
<p>性别：男<input type="radio" name="sex">女<input type="radio" name="sex"></p>
</form>
单选框.png
2）复选框
<form name="f1" method="post" action="">
<p>姓名：<input type="text" placeholder="请输入您的姓名" /> </p>
<p>密码：<input type="password" /></p>
<p><input type="submit" value="登录"> <input type="reset" value="重新填写"></p>
<p>性别：男<input type="radio" name="sex">女<input type="radio" name="sex"></p>
<p>爱好：运动<input type="checkbox" name="like">聊天<input type="checkbox" name="like">玩游戏<input type="checkbox" name="like"></p>
</form>
3)disabled="disabled" :禁用
在男后面添加disabled="disabled" ，让男的单选框被禁用。
<p>性别：男<input type="radio" name="sex" disabled="disabled"></p>
观察截图发现，男后面的单选框变暗了（不能选择了）.png
4）checked="checked"：默认选中
在男后面添加checked="checked"，让男被默认选中。
<p>性别：男<input type="radio" name="sex" checked="checked"></p>
观察截图发现，男后面的单选框默认选中.png
disabled和checked在单选框和复选框都适用。
5）按钮：<input type="button"/>
<p><input type="button" value="下一页" /></p>
其他控件2.png
下拉菜单：
<p>出生年月：
<select name="" id="">
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>月
</p>
下拉菜单.png
多行文本框.png
<p>个人简介：<textarea name="" id="" cols="30" rows="10"></textarea></p>
这里的cols=“30”，表示30个字符。rows同理。
多行文本框.png
最后给出这篇文章的整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{margin-bottom: 20px; }
</style>
</head>
<body>
<form name="f1" method="post" action="">
<p>姓名：<input type="text" placeholder="请输入您的姓名" /> </p>
<p>密码：<input type="password" /></p>
<p><input type="submit" value="登录"> <input type="reset" value="重新填写"></p>
<p>性别：男<input type="radio" name="sex" checked="checked">女<input type="radio" name="sex"></p>
<p>爱好：运动<input type="checkbox" name="like">聊天<input type="checkbox" name="like">玩游戏<input type="checkbox" name="like"></p>
<p><input type="button" value="下一页" /></p>
<p>出生年月：
<select name="" id="">
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>月
</p>
<p>个人简介：<textarea name="" id="" cols="30" rows="10"></textarea></p>
</form>
</body>
</html>
总结
这篇文章，整体上学习了文本框、密码框、提交按钮、单选框、复选框、简单按钮、下拉菜单、多行文本框这8个标签。
实现了简单的注册界面。
