HTML5
表单
<from method="get/post(更安全) action="传给谁>
<input type="text(文本)/password(密码)/submit(提交按钮) /
radio(单选)/checkbox(多选)/button(单纯按钮)/file(文件上传)/
hidden(隐藏的输入字段)/image(图像形式的提交按钮)/reset(重置按钮)>
其他属性:
value="值
name="名称
placeholder="提示
input::-webkit-input-placeholder{ color:green;}(修改placeholder样式)
size=尺寸 宽度(字符数)
maxlength=“正整数 规定输入字符的最大长度
注:radio时 name取相同值实现单选
radio和checkbox时 checked=“checked”(可省略) 实现默认选择
disable=“disable”(可省略) 实现不可选
<button></button>
相比于submit更实用 双标签可以插入其他东西
使用阿里矢量图标库时 可以在表单元素内添加矢量图(添加在线css及iconfont类名) eg:
<input type="text" placeholder="&#xxxxx" class="iconfont">
或
<button class="iconfont">&#xxxxx</button>
表单字段集
<fieldset></fieldset>
disabled表示不可以填写用户信息
表单盒子,用于收集用户信息,默认自带边框,可以互相嵌套
字段集标题
<legend></legend>
align:left/right/center/justify;标题位置
legend必须是表单的第一个子集元素
label 为input元素定义标注
用于绑定一个表单元素 ,点击label内的文本会自动将光标定到相应的表单元素上增加用户体验
<label for="sex”> 男</label>`
<input type="radio" name="sex" id="sex"/>
下拉菜单
<select>
<option selected="select(默认选择)" value=""></option>
</select>
<!-- select的value获取到的就是当前被选中的option的value,
如果option没有value,就获取option的标签内容 -->
文本域
<textarea></textarea>
resize:none;可以防止文本域拖拽
且文本域需在一行代码内,代码换行时文本域内有空处。
表单轮廓线
给表单添加outline:0;或者outline:none样式之后,就可以去掉默认蓝色边框。