表单

表单

1,创建表单<form ></form>

form的属性：action=“访问者提交表但是，服务器对数据进行处理的脚本的url”

                method=“post”；或“get”；

2，处理表单：表单验证

3，对表单元素进行组织

<form method="post" action="show-data.php">
   <fieldset>
         <div class=".."> 
                <p class=".."> ...</p>
          </div>
   </fieldset>
</fprm>

5,创建文本框（例如）

<input type="text" id="first-name" name="first-name" required="required" class="field-large"/>

input的属性可以有：type，name id class autofocus size maxlength

6,为表单添加说明（例如）

<label for="first-name">First Name:</label>

7，创建密码框

type="password"    (例如)

<input type="password" id="password" name="password" class="field-large"/>

8，创建电子邮件框

用type指定电子邮件框，URL框，电话框。pattern属性用于定制验证规则。（例如）

（创建电子邮件框）<input type="email" id="email" name="email" class="field-large" placeholder="xxxxxxxx@qq.com"/>
（创建URL框）<input type="website" id="website" name="website" class="field-large" placeholder="http://www.example.com" />
（创建电话框）<input type="tel" id="teltel" name="tel" class="field-large" placeholder="xxx-xxxx-xxxx" />

9，创建单选按钮（type=“radio”）（例如）

<input type="radio" id="gender-male" name="gender" value="male" />
 <label for="gender-male">Male</label>

10，创建复选框：

type="checkbox" 

<input type="checkbox" id="email-ok-msg-users" name="email_signup[]" value="user-emails" />

11，创建文本区域

<textarea></textarea>

<textarea id="bio" name="bio" cols="40" rows="5" class="field-large"></textarea>

12,创建选择框

 <select id="state" name="state" class="field-large">
    <option value="null">请选择</option>
    <option value="CH">China</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="Cf">California</option>
 </select>  <!--E  创建选择框-->   

13，让访问者上传文件

<label for="picture">Picture:</label>
<input type="file" id="picture" name="picture" />    
<p class="instructions">Maximum size of 800k.jpg,gif or png.</p>

14，设置隐藏字段

<input type="hidden" name=".."  value="n">

15,创建提交按钮

！！创建带图标的提交按钮（例如）

<input type="image" src="logo.jpg" width="50" heigth="50" alt="button" />