表单实践效果:
介绍:一共两个表单,通过按钮进行切换,切换的逻辑很简单,一个表单div的display设置为none,另一个block,我通过JS来实现点击触发切换样式就行了。
对齐方式:
看到网页模板的时候,第一眼就是所有的input元素都是对齐的,所以将每一行设为一个ul>li*2就行了第一个li设定一个固定宽度,内的文本全部向右对齐,第二个li放input元素,两个li通过浮动来水平排列,通过外边距和内边距调整每行的间距和内部的间距。但是要注意,因为所有input所在区块的右边显然也是对齐的,所以第二个li很明显应该定好宽度。
input内的提示文字:
对于type="text"这样input元素来说,想加上提示文字就只需要使用属性placeholder就行了,placeholder=“提示文字”。但是对于date来说,想直接加上提示文字就比较困难了,因为这个元素不允许直接输入文本,所以我在实现表单中的:
这里的文字,我是通过绝对定位加上去的,设置好了需要提示的文字和大小,背景和date的背景一致就行了,再使用JS的onchange事件去触发让只要date内的内容不为空就将提示部分的display设为none;就可以达到效果了。
问题:
目标样式:
目前我还没有找到方法改变这里的样式。
上面这个样式我没有做出来,但是已经有了思路了,如果想达到这样的效果,直接用select,很难做到。提示文字其实难度不大。下面是核心代码: