html+css学习笔记011-表单

Mr. 柳上原

发布于 2018-09-05 15:13:27

8040

发布于 2018-09-05 15:13:27

文章被收录于专栏：菜鸟前端工程师

Author：Mr.柳上原

付出不亚于任何的努力
愿我们所有的努力，都不会被生活辜负
不忘初心，方得始终

责任与担当

这几天公司招聘文案

好几个应聘上的孩子

答应的好好的第二天来上班

然而却一去不复返

给公司的工作计划造成了极大的困扰

并不是责备他们

而是从他们身上

看到了以前那任性和不负责任的自己

原来当初我那些自以为小小的无所谓的举动

会给亲人、朋友和同事带来那么大的麻烦

只是他们选择了宽容

<!DOCTYPE html> <!-- 文档类型：标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字：英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

form表单属性
action:' '; 定义数据提交地址
target:' '; 页面打开方式
_block 新窗口打开
_self 原窗口打开
method:' '; 数据提交的方式
get 提交表单的方式（明）
post 提交表单的方式（暗）

form表单控件
<input />
type:' '; 控件类型
text; 文本框
password; 密码框
radio; 单选框，需要指定相同的name名称
checkbox; 多选框
button; 按钮，没有特别的功能，多用来结合js提交数据
image; 图片按钮，提交数据
submit; 提交按钮
reset; 重置按钮
file; 文件上传
hidden; 隐藏表单，悄悄提交数据
name:' '; 控件名称
value:' '; 神奇用法...摸索
placeholder:' '; 输入框默认提示文字
checked:'checked'; 默认选中
disabled:'disabled'; 不可选中

<select> </select> 下拉标签
size:' '; 定义默认显示几条内容
样式属性：
width:' '; 定义宽度
height:' '; 定义高度，ie兼容有问题

<option></option> 子标签
selected:'selected'; 定义默认显示哪项内容

<textarea></textarea> 文本标签
cols:' '; 定义列数，控制宽度
rows:' '; 定义行数，控制高度
样式属性：
width:' '; 定义宽度
height:' '; 定义高度
resize:vertical; 垂直方向可以拖动
resize:horizontal; 水平方向可以拖动
resize:none; 不允许拖动

<fieldset></fieldset> 分组标签
<legend></legend> 组标题

input:focus{ } 焦点
/* 适用于form控件 a标签 button（<button type='button'>按钮</button>） */
outline:1px solid #CCCCCC; 定义焦点边框

</style>

</head>

<body> <!-- 网页主干：可视化区域 -->

<div id='wrap' class='wrap'>
<form action='https://www.' target='_block' method=' '> <!-- 表单 -->
<!-- input标签用法 -->
用户名：<input type='text' name='user' value='请输入用户名'/>
密码名：<input type='passwrod' name='pw' value='mima'/>
单选：
<label>
<input type='radio' name='sex' value='nv' checked='checked'/>女
</label> <!-- 关联表单：直接包裹 -->
<input type='radio' name='sex' value='nan'/>男
多选：
<fieldset> <!-- 表单分组标签 -->
<legend>多选：</legend> <!-- 分组标题 -->
<input type='checkbox' name='sex1' value='nan' checked='checked'/>男
<input type='checkbox' name='sex2' value='renyao' disabled='disabled'/>人妖
<input id='sex3' type='checkbox' name='sex3' value='nv' checked='checked'/>
<label for='sex3'>女</label> <!-- 关联表单：id绑定 -->
</fieldset>
按钮：<input type='button' value='按钮'/>
图片按钮：<input type='image' src='images'/>
提交按钮：<input type='submit' value='提交表单'/>
重置按钮：<input type='reset' value='重置表单'/>
上传文件：<input type='file' value='上传文件'/>
隐藏表单：<input type='hidden' value='偷偷地'/>

<!-- select标签用法 -->
<select name='select' size:'1'>
<option value='nv' selected:'selected'>女</option>
<option value='nan'>男</option>
<option value='renyao'>人妖</option>
</select>

<!-- textarea标签用法 -->
<textarea name='textarea' cols='9' rows='9'>
</textarea>
<div> <!-- maxwidth;maxheight 控制textarea拉伸宽高 -->
<textarea name='textarea' cols='9' rows='9'>
</textarea>
</div>
</form>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.05.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html