HTML+CSS学习进度07

表单form1   

      Text input(文本输入框)是用来获得用户输入的绝佳方式。

      可以创建为：<input type="text">注意，input元素是自关闭的

      占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。如，<input type="text" placeholder="this is placeholder text">

      使用HTML来构建可以跟服务器交互的Web表单(form)，通过给form元素添加一个action属性来达到此目的，action属性的值指定了表单提交到服务器的地址，

      如<form action="/url-where-you-want-to-submit-form-data"></form>

      为form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到通过action属性指定的地址上。如，<button type="submit">this button submits the form</button>

      整个的一个表单如下，实现效果如图具体代码如下:

      <form action="/submit-cat-photo">
      <input type="text" placeholder="cat photo URL">
      <button type="submit">Submit</button>
      </form>

表单form2     

       当设计表单时，可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。

       例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：<input type="text" required>

单选按钮radio button

       单选按钮只是input输入框的一种类型，每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

       注意：所有关联的单选按钮应该使用相同的name属性。

       如：<label><input type="radio" name="indoor-outdoor">indoor</label>

            <label><input type="radio" name="indoor-outdoor">outdoor</label> 

复选按钮checkboxes

        复选按钮是input的输入框的另一种类型，每一个复选按钮都应该嵌套进label元素中。和单选按钮类似，所有关联的复选按钮应该具有相同的name属性。      

        如： <label><input type="checkbox" name="personality">Loving</label>
             <label><input type="checkbox" name="personality">outgoing</label>
             <label><input type="checkbox" name="personality">shy</label>

        使用checked属性，你可以设置复选按钮和单选按钮默认被选中。如<input type="radio" name="test-name" checked>