中软大前端体验0104-form表单

发表于 | 分类于

form 表单

1
2
3
<form action="" method="post">
</form>

action：表单的提交位置

method：方法

  • 属性值post：不显示参数,安全性高
  • 属性值get：会显示参数，速度比post快

input标签

1
<input type="" name="" id="" value="" />

type属性：input类型

  • 属性值text：文本类型
  • 属性值password：密码，输入字符显示为点或*
  • 属性值button：按钮类型
  • 属性值radio：单选框，name值要一致
  • 属性值file: 上传文件
  • 属性值checkbox：复选框，name值要一致
  • 属性值submit：提交按钮，提交到action所指位置
  • 属性值reset：重置按钮，重置功能
  • 属性值date：选择日期，日历（H5）
  • 属性值month:年月，没有日
  • 属性值week:xxxx年第–周
  • 属性值time:时间，具体几时几分
  • 属性值datetime：输入没什么限制
  • 属性值datetime-local:跟时区有关，本地时间.最完整
  • 属性值tel：验证，手机号
  • 属性值email：验证，邮箱
  • 属性值url：验证，链接
  • 属性值number：验证,只显示数字 可设置最大值和最小值，step固长:跳跃值
  • 属性值range：范围
  • 属性值seacher：搜索框，填入内容框中有叉号（删除）
  • 属性值color：颜色

id属性：标签的唯一标识符，多用于js

value属性：显示在控件上的内容，值

placeholder属性：提示字符,input中默认显示字符

checked属性:radio和checkbox被选中状态

maxlength属性：最大长度

form属性：当表单中的元素与表单分离时，可以用form属性与表单建立联系

required属性：非空验证

autofocus属性：鼠标自动聚焦

autocomplete属性：表单自动填充，表单的记忆功能

multiple属性：多个文件上传

select下拉菜单

1
2
3
4
5
<select name="adress">
	<option value="tj">天津</option>
	<option value="bj" selected="selected">北京</option>
	<option value="hb">河北</option>
</select>

option默认选中:selected

二级联动

分组
<optgroup lable="天津">-----不可选的 <option value="a">南开区</option> <option value="b">南开区</option> <option value="c">南开区</option> </optgroup>

textarea备注

1
<textarea name="" rows="" cols=""></textarea>
  • rows：行数，即文本框的高
  • cols：列数，即文本框的宽
  • readonly: 内容不可修改，只读

button标签

fildset标签

1
2
3
<fieldset id="grjl">
	<legend>个人简历</legend>
</fielset>

datalist标签

1
2
3
4
5
6
7
8
9
<input type="text" name="" list="listData">
<datalist id="listData">
	<option value="1" label="group1"></option>
	<option value="2" label="group2"></option>
	<option value="3" label="group3"></option>
	<option value="4" label="group4"></option>
	<option value="5" label="group5"></option>
	<option value="6" label="group6"></option>
</datalist>

input中的list值与datalist中的id值相同，

keygen标签

<keygen name="secrate"/> 生成秘钥，加强页面保密性

output标签

显示输出结果

伽卡他卡学生端退出
运行cmd
taskkill /im student.exe /t /f || taskkill /im smonitor.exe /t /f

设计logo
1、提炼关键词
2、草图绘制
3、规范制图
4、logo说明，logo示意
5、效果展示

$(function (){
$(“.header”).load(“top.html”);
});