表单基本控件

表单的创建

所有的HEML表单都以一个form元素开始。

<form action="" method="">
</form>

form标签的action属性表示表单要提交到的后台程序的网址 form标签的method属性表示表单提交的方式，有get或者post

单行文本框

使用type属性值被设置为text的input元素可以创建单行文本框，它是一个单标签。

   <form action="" method="">
       <p>
           请输入姓名：<input type="text">
       </p>
       <p>
           报考院校：<input type="text" value="河南理工大学" disabled>
       </p>
       <p>
           毕业学校：<input type="text" placeholder="河南理工大学">
       </p>
   </form>

value属性表示已经填写好的值。 placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值 disabled属性表示用户不能与元素交互，即“锁死”

单选按钮

使用type属性值被设置为radio的input元素可以创建单选按钮，就像老式收音机一样你按一个按钮其他按钮就会自动弹出

      <p>
           性别：
           <label>
               <input type="radio" name="sex" value="男" checked>男
           </label>
           <label>
               <input type="radio" name="sex" value="女">女
           </label>
           
       </p>
       <p>
           血型：
           <input type="radio" name="bloodtype" value="A" id="A">
           <label for="A">A </label>
           <input type="radio" name="bloodtype" value="B" id="B">
           <label for="B">B</label>
           <input type="radio" name="bloodtype" value="O" checked id="O"> 
           <label for="O">O</label>
           <input type="radio" name="bloodtype" value="AB" id="AB">
           <label for="AB">AB</label>
       </p>

互斥的单选按钮应该设置它们的name 为相同值,只有这样才能实现选择一个另一个会被弹出 单选按钮要有value属性值，向服务器提交的就是value属性值 单选按钮如果被加上checked属性,就会默认被选中 为了使用户体验感更加好通过使用label标签可以将文字和单选按钮进行绑定，这样当用户单击文字的时候也可以视为点击了单选按钮。 在HTML4时使用id和for将按钮和文字进行绑定，不能直接使用label标签包裹input 标签。

复选框

使用type属性值被设置为checkbox的input元素可以创建复选框

       <p>
           爱好：
           <label>
               <input type="checkbox" name="hooby" value="篮球">篮球
           </label>
           <label>
            <input type="checkbox" name="hooby" value="足球">足球
            </label>
            <label>
                <input type="checkbox" name="hooby" value="排球">排球
            </label>
            <label>
                <input type="checkbox" name="hooby" value="羽毛球">羽毛球
            </label>
            <label>
                <input type="checkbox" name="hooby" value="乒乓球">乒乓球
            </label>
       </p>

密码框

使用type属性值被设置为password的input元素可以设置密码框

    <p>
           请输入密码：
           <input type="password">
       </p>

下拉菜单

select标签表示下拉菜单，option是他内部的选项。其要求与无序列表一致。

        <p>
           选择你最喜欢的编程语言：
           <select name="" id="">
               <option value="JavaScript">JavaScript</option>
               <option value="php">php</option>
               <option value="java">java</option>
               <option value="c++">c++</option>
           </select>
       </p>

多行文本框

textarea表示多行文本框，rows和cols属性，用于定义多行文本框的行数和列数。

       <p>
           留言：
           <textarea name="" id="" cols="30" rows="10"></textarea>
       </p>

三种常见按钮

表单中常见三种按钮，他们也都是input标签，只是type属性不同。

     <p>
           <input type="button" name="love">
       </p>
       <p>
           <input type="submit" name="提交">
       </p>
       <p>
           <input type="reset" name="重置">
       </p>