HTML5表單

09.PNG
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html表單</title>
</head>
<body>
    <form id="userform" action="your url" method="post" 
    title="用戶注冊表單" target="_self" enctype="multipart/form-data">
        <fieldset>
            <legend>用戶注冊信息</legend>
            <br>
            昵稱:<input type="text" name="un" maxlength="15" value="Tom">
            <br>
            <br>
            密碼:<input type="password" name="pw" maxlength="10">
            <br>
            <br>
            性別:<input type="radio" name="gender" value="m" checked="checked">男
            <input type="radio" name="gender" value="w">女
            <br>
            <br>
            頭像:<input id="userphoto" type="file" name="profile">
            <br>
            <br>
            籍貫:<select name="province">
                <option >河北</option>
                <option >遼寧</option>
                <option >吉林</option>
                <option >云南</option>
                <option selected="selected">廣西</option>
            </select>
            <br>
            <br>
            愛好:<input name="hobby" type="checkbox">讀書
            <input name="hobby" type="checkbox">寫字
            <input name="hobby" type="checkbox" checked="checked">彈琴
            <br>
            <br>
            個人簡介:
            <br>
            <br>
            <textarea name="introduce" cols="30" rows="10">請在此輸入簡介</textarea>
            <br>
            <br>
            個人網站:<input name="userurl" type="url">
            <br>
            <br>
            個人郵箱:<input name="useremail" type="email">
            <br>
            <br>
            身體體重:<input name="userweight" type="number">
            <br>
            <br>
            出生日期:<input name="userdate" type="date">
            <br>
            <br>
            詳細時間:<input name="usertime" type="time">
            <br>
            <br>
            性格顏色:<input type="color" name="usercolor">
            <br>
            <br>    
            <input type="submit" value="開始注冊">
            <input type="reset" value="重置信息">
            <br>
            <br>

        </fieldset>
    </form>

</body>

</html>

Html5增加了一些新的特性

  • form屬性
    Html5之前所有的表單屬性都要放到form里面,新增了form屬性后,每個標簽不用放到form里面
    例如:
畢業院校:<input type="text" name="school" form="userform">

但是填寫form的時候要注意,一定要和上面的一樣,對應起來。

  • datalist標簽
<datalist id="namesList">
                 <option value="gyy">高圓圓</option>
    </datalist>
  • formxxxx屬性
    例如,有兩個按鈕都在form表單里面,但他們的處理方式不一樣。show time


    092.PNG
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表單中的formxxx屬性</title>
</head>
<body>


    <form>
        
username:<input type="text" name="un">
<br>
<br>
password:<input type="password" name="pw">
<br>
<br>

<input type="submit" value="注冊" formaction="regist url" formmethod="get" formtarget="_self" formenctype="application/x-www-form-urlencoded">
<input type="submit" value="登錄" formaction="login url" formmethod="post" formtarget="_blank" formenctype="application/x-www-form-urlencoded">

    </form>


    
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容