primary telephone number with three text field

I would like to create the following:

And I did as follows:

<span>* Primary Phone:</span>
        <input name="prim1" type="text" id="prim1" class="required">
        <input name="prim2" type="text" id="prim2" class="required">
        <input name="prim3" type="text" id="prim3" class="required">

however I get:

I'd like to make the text smaller by specifying the width however it doesn't do that. I also need a way to do the validation for this using jQuery, how can I do it if it's a separate text f开发者_如何学Pythonield?

I wouldn't recommend just setting the width on all required fields, I believe you need to update your html to better reflect what you are trying to convey and I wouldn't necessarily do it in the CSS as this is data that should be present even without styling. I would do something like:

<span>* Primary Phone:</span>
<input name="prim1" type="text" id="prim1" size="3" class="required">
<input name="prim2" type="text" id="prim2" size="3" class="required">
<input name="prim3" type="text" id="prim3" size="4" class="required">

Take a look at this for why input size would be acceptable where font size typically isn't.

For more on validation and preventing invalid characters, I would use JQuery Validation or an Autotabber (like http://www.mathachew.com/sandbox/jquery-autotab/) with masking built in.

Rather than apply the style to input.required, I'd apply it on the 3 ID's, otherwise every input that has class="required" (which is needed for the validation) will be 50px wide.

#prim1, #prim2, #prim3 { width: 50px; display:inline-block; }

In your css

#prim1, #prim2, #prim3 { width: 50px; display:inline-block; }

The jQuery validation plugin will take care of each element marked 'required'