PHP で新しいユーザー登録インターフェイスのレイアウトを作成する例

<span><!</span><span>DOCTYPE</span><span>></span><span><</span><span>html</span><span>></span><span><</span><span>head</span><span>></span><span><</span><span>title</span><span>></span>Load page<span></</span><span>title</span><span>></span><span><</span><span>meta </span><span>http-equiv</span><span>="Content-type"</span><span> content</span><span>="text/html"</span><span> charset</span><span>="utf8"</span><span>></span><span><</span><span>style </span><span>type</span><span>="text/css"</span><span>></span><span>        body</span><span>{</span><span>            font-family</span><span>:</span><span>Arial, Helvetica, sans-serif</span><span>;</span><span>            font-size</span><span>:</span><span>12px</span><span>;</span><span>            color</span><span>:</span><span>#666666</span><span>;</span><span>            background</span><span>:</span><span>#fff</span><span>;</span><span>            text-align</span><span>:</span><span>center</span><span>;</span><span>}</span><span>        *</span><span>{</span><span>            margin</span><span>:</span><span>0</span><span>;</span><span>            padding</span><span>:</span><span>0</span><span>;</span><span>}</span><span>        a</span><span>{</span><span>            color</span><span>:</span><span>#1e7ace</span><span>;</span><span>            text-decoration</span><span>:</span><span>none</span><span>;</span><span>}</span><span>        a:hover</span><span>{</span><span>            color</span><span>:</span><span>#000</span><span>;</span><span>            text-decoration</span><span>:</span><span>underline</span><span>;</span><span>}</span><span>        h3</span><span>{</span><span>            font-size</span><span>:</span><span>14px</span><span>;</span><span>            font-weight</span><span>:</span><span>bold</span><span>;</span><span>}</span><span>        pre, p</span><span>{</span><span>            color</span><span>:</span><span> #1e7ace</span><span>;</span><span>            margin</span><span>:</span><span>4px</span><span>;</span><span>}</span><span>        input, select, textarea</span><span>{</span><span>            padding</span><span>:</span><span>1px</span><span>;</span><span>            margin</span><span>:</span><span>2px</span><span>;</span><span>            font-size</span><span>:</span><span>11px</span><span>;</span><span>}</span><span>        #myform</span><span>{</span><span>            width</span><span>:</span><span>450px</span><span>;</span><span>            margin</span><span>:</span><span>15px auto</span><span>;</span><span>            padding</span><span>:</span><span>20px</span><span>;</span><span>            text-align</span><span>:</span><span>left</span><span>;</span><span>            border</span><span>:</span><span>1px solid #a4cdf2</span><span>;</span><span>}</span><span>        fieldset</span><span>{</span><span>            padding</span><span>:</span><span>10px</span><span>;</span><span>            margin-top</span><span>:</span><span>5px</span><span>;</span><span>            border</span><span>:</span><span>1px solid #a4cdf2</span><span>;</span><span>            background</span><span>:</span><span>#fff</span><span>;</span><span>}</span><span>        fieldset legend</span><span>{</span><span>            color</span><span>:</span><span>#1e7ace</span><span>;</span><span>            font-weight</span><span>:</span><span>bold</span><span>;</span><span>            padding</span><span>:</span><span>3px 20px 3px 20px</span><span>;</span><span>            border</span><span>:</span><span>1px solid #a4cdf2</span><span>;</span><span>            background</span><span>:</span><span>#fff</span><span>;</span><span>}</span><span>        fieldset label</span><span>{</span><span>            float</span><span>:</span><span>left</span><span>;</span><span>            width</span><span>:</span><span>120px</span><span>;</span><span>            text-align</span><span>:</span><span>right</span><span>;</span><span>            padding</span><span>:</span><span>4px</span><span>;</span><span>            margin</span><span>:</span><span>1px</span><span>;</span><span>}</span><span>        fieldset div</span><span>{</span><span>            clear</span><span>:</span><span>left</span><span>;</span><span>            margin-bottom</span><span>:</span><span>2px</span><span>;</span><span>}</span><span>        .buttom</span><span>{</span><span>            padding</span><span>:</span><span>1px 10px</span><span>;</span><span>            font-size</span><span>:</span><span>12px</span><span>;</span><span>            border</span><span>:</span><span>1px #1e7ace solid</span><span>;</span><span>            background</span><span>:</span><span>#d0f0ff</span><span>;</span><span>}</span><span>        .input</span><span>{</span><span>            width</span><span>:</span><span>120px</span><span>;</span><span>}</span><span>        .enter</span><span>{</span><span>            text-align</span><span>:</span><span>center</span><span>;</span><span>}</span><span>        .clear</span><span>{</span><span>            clear</span><span>:</span><span>both</span><span>;</span><span>}</span><span></</span><span>style</span><span>></span><span></</span><span>head</span><span>></span><span><</span><span>body</span><span>></span><span><</span><span>div </span><span>id</span><span>="myform"</span><span>></span><span><</span><span>center</span><span>><</span><span>h3</span><span>></span>创建新用户<span></</span><span>h3</span><span>></</span><span>center</span><span>></span><span><</span><span>form </span><span>method</span><span>="post"</span><span> name</span><span>="myForm"</span><span> id</span><span>=""</span><span>></span><span><</span><span>fieldset</span><span>></span><span><</span><span>legend</span><span>></span>用户注册<span></</span><span>legend</span><span>></span><span><</span><span>div</span><span>></span><span><</span><span>label </span><span>for</span><span>="Name"</span><span>></span>用户名<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="Name"</span><span> class</span><span>="input"</span><span> id</span><span>="Name"</span><span> size</span><span>="20"</span><span> maxlength</span><span>="30"</span><span>/></span><span>                *(可输入字母数组下划线)</span><span><</span><span>br</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div</span><span>></span><span><</span><span>label </span><span>for</span><span>="Email"</span><span>></span>email<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="Email"</span><span> class</span><span>="input"</span><span> id</span><span>="Email"</span><span> size</span><span>="20"</span><span> maxlength</span><span>="150"</span><span>/></span><span>                *</span><span><</span><span>br</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div</span><span>></span><span><</span><span>label </span><span>for</span><span>="password"</span><span>></span>输入密码<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="password"</span><span> name</span><span>="password"</span><span> class</span><span>="input"</span><span> id</span><span>="password"</span><span> size</span><span>="18"</span><span> maxlength</span><span>="15"</span><span>/></span><span>                *(长度不能超过15个字符)</span><span><</span><span>br</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div</span><span>></span><span><</span><span>label </span><span>for</span><span>="confirm_password"</span><span>></span>重复密码<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="password"</span><span> name</span><span>="confirm_password"</span><span> class</span><span>="input"</span><span> id</span><span>="confirm_password"</span><span> size</span><span>="18"</span><span> maxlength</span><span>="15"</span><span>/></span><span>                *</span><span><</span><span>br</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div</span><span>></span><span><</span><span>label </span><span>for</span><span>="AgreeToTerms"</span><span>></span>同意用户服务条款<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>style</span><span>="height:22px;"</span><span> type</span><span>="checkbox"</span><span> name</span><span>="AgreeToTerms"</span><span> id</span><span>="AgreeToTerms"</span><span> value</span><span>="1"</span><span>/></span><span><</span><span>a </span><span>style</span><span>="vertical-align:super;"</span><span> href</span><span>="#"</span><span> title</span><span>="您是否同意服务条款"</span><span>></span>点此查看用户条款<span></</span><span>a</span><span>></span><span><</span><span>i </span><span>style</span><span>="position:relative;top:-2px;"</span><span>></span> *<span></</span><span>i</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div </span><span>class</span><span>="enter"</span><span>></span><span><</span><span>input </span><span>name</span><span>="create791"</span><span> type</span><span>="submit"</span><span> class</span><span>="buttom"</span><span> value</span><span>="提交"</span><span>/></span><span><</span><span>input </span><span>name</span><span>="Submit"</span><span> type</span><span>="reset"</span><span> class</span><span>="buttom"</span><span> value</span><span>="重置"</span><span>/></span><span></</span><span>div</span><span>></span><span></</span><span>fieldset</span><span>></span><span></</span><span>form</span><span>></span><span><</span><span>br</span><span>></span><span></</span><span>div</span><span>></span><span></</span><span>body</span><span>></span><span></</span><span>html</span><span>></span>