表单form浅谈

Posted 2020-06-13

　　在html中有form表单元素，而form表单最大的一个作用就是与后台服务器交换数据。

　　常见的表单元素类型：

　　　　输入型：text password textarea

　　　　选择型：radio select checkbox file 

　　　　按钮 ：submit button reset 

　　　　隐藏：hidden

 

　　当然还有一些html5新出的类型：email number date range color  等等，当然不是所有浏览器都支持，所以一般的表单验证还是要自己另外写。

　　在一张网页中我们把字体一般会设为“微软雅黑”。

     body{font-family:"微软雅黑"}

　　但是设置后我们在text文本框中输入文字发现它依然不是微软雅黑字体，那么我们就要单独设置input输入框的字体　

　　input,textarea{font-family: "微软雅黑";}

　　有时我们可以把整个表单放置在一个fieldset标签里面，则会如下图

　　

  <fieldset>我爱你，就像老鼠爱大米
        <legend>请填写表格</legend>
        <form action="" method="post">
            <input type="text" name="" id="" value="" />
            
                <input type="text" value="我为什么是个帅哥" readonly="readonly"/>
                
                <label for="test" style="vertical-align:top;">自我介绍</label>
                <textarea name="" id="test"></textarea>    
            
        </form>
    </fieldset>

　　

　　textarea文本输入框，设置宽高，既可以使用width很height来设置，也可以使用cols和rows来设置。

　　我们可以给textarea加上label标签

<label for="test" >自我介绍</label>
<textarea name="" id="test"></textarea>

如果要使“自我介绍”在文本域上部，我们可以给label设置属性vertical-align:top  

　　当我们在使用radio和checkbox时，应该注意加上label标签这样我们只需点击文字就可以选中，可以增强用户体验　　

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

　　我们在设置radio和checkbox的默认值时，可以加入属性checked，则默认就会选中；但是在select中我们要加入属性selected。

　　另外有属性readonly和disable都是禁止用户输入，使用readonly属性后，用户可以获取焦点，但是不能输入，而使用disable后，用户连焦点也获取不了。

<input type="text" value="我为什么是个帅哥" readonly="readonly"/>

　　当表单提交时，如果设置属性readonly，那么会把value里面的值传到服务器后台，如果是设置成disable则不会提交到后台。